| 1 | # Falert
|
| 2 |
|
| 3 | Falert is a Funky Alert. It's fun and weird. It uses CSS transforms to give the illusion that it's floating above the page. It can be used to provide user feedback in a colourful and irreverant way. UI elements like this are sometimes called Toast.
|
| 4 |
|
| 5 | ## Installing
|
| 6 |
|
| 7 | If you're using a bundler:
|
| 8 |
|
| 9 | ```shell
|
| 10 | $ npm install @code_monk/falert
|
| 11 | ```
|
| 12 |
|
| 13 | And then in your application code:
|
| 14 |
|
| 15 | ```javascript
|
| 16 | import {Falert} from "@code_monk/falert";
|
| 17 |
|
| 18 | new Falert("Info", "Some information for you", "notice");
|
| 19 | ```
|
| 20 |
|
| 21 | Or simply import using a URL:
|
| 22 |
|
| 23 | ```javascript
|
| 24 | import {Falert} from 'https://unpkg.com/@code_monk/falert@latest/dist/es2022/falert.js';
|
| 25 |
|
| 26 | new Falert("Cool!", "Using ES6 modules is fun", "warning");
|
| 27 | ```
|
| 28 |
|
| 29 | ## Usage
|
| 30 |
|
| 31 | The API is: `new Falert(<heading>, <message>, <optional type>)` where `<optional type>` is one of "fatal", "warning", or "notice". Notice is the default.
|
| 32 |
|
| 33 | Simply click on the falert to close it.
|
| 34 |
|
| 35 | If multiple falerts are launched, the newer one will try to launch slightly lower so that everything is still visible.
|
| 36 |
|
| 37 | [Check out the demo](https://www.seanmacdonald.ca/projects/falert/) to see it in action.
|