Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/egoist/native-toast
Native-like toast notification but for the web.
https://github.com/egoist/native-toast
Last synced: 23 days ago
JSON representation
Native-like toast notification but for the web.
- Host: GitHub
- URL: https://github.com/egoist/native-toast
- Owner: egoist
- License: mit
- Created: 2016-05-26T10:01:18.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-05-09T13:16:01.000Z (over 2 years ago)
- Last Synced: 2024-10-04T10:49:51.535Z (about 1 month ago)
- Language: HTML
- Homepage: https://native-toast.egoist.sh
- Size: 160 KB
- Stars: 150
- Watchers: 4
- Forks: 10
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# native-toast [](https://npmjs.com/package/native-toast) [](https://npmjs.com/package/native-toast)
> Native-like toast notification but for the web. (JS + CSS ≈ 4KB)
## Install
```bash
$ npm install --save native-toast
```
NPMCDN: https://unpkg.com/native-toast/dist/
## Usage
First import `native-toast/dist/native-toast.css`, then:
```js
import nativeToast from 'native-toast'
nativeToast({
message: 'wait wait!',
position: 'north-east',
// Self destroy in 5 seconds
timeout: 5000,
type: 'warning'
})
// or nativeToast.warning(options)
```
Four types: `success` `warning` `info` `error`
## API
### nativeToast(options)
#### options
##### message
Type: `string`
Default: `''`
Toast message.
##### position
Type: `string`
Default: `south-east`
Values: `center` `west` `east` `south` `south-west` `south-east` `north` `north-west` `north-east`
Toast position.
##### rounded
Type: `boolean`
Default: `false`
Set `border-radius` to `33px` instead of `3px`. Has no effect when `edge === false`.
##### timeout
Type: `number`
Default: `3000`
Self destroy in specfic timeout. If given `0` or `false then toast will never self destroy.
##### type
Type: `string`
Default: `undefined`
One of `success` `warning` `info` `error`.
A short-hand usage: `nativeToast.success(opts)` `nativeToast.error(opts)` and such.
##### icon
Type: `boolean`
Default: `true`
Set to `false` to disable icon.
##### edge
Type: `boolean`
Default: `false`
Show toast on the edge.
##### closeOnClick
Type: `boolean`
Default: `false`
Close the toast when clicked.
##### elements
Type: `HTMLElement[]`
Optionally provide an array of HTML elements to insert after the `message`.
## License
MIT © [EGOIST](https://github.com/egoist)