UNPKG

native-toast/README.md

Version:

1.91 kBMarkdownView Raw

1# native-toast [![NPM version](https://img.shields.io/npm/v/native-toast.svg)](https://npmjs.com/package/native-toast) [![NPM downloads](https://img.shields.io/npm/dm/native-toast.svg)](https://npmjs.com/package/native-toast)
2
3> Native-like toast notification but for the web. (JS + CSS ≈ 4KB)
4
5## Install
6
7```bash
8$ npm install --save native-toast
9```
10
11NPMCDN: https://unpkg.com/native-toast/dist/
12
13## Usage
14
15First import `native-toast/dist/native-toast.css`, then:
16
17```js
18import nativeToast from 'native-toast'
19
20nativeToast({
21  message: 'wait wait!',
22  position: 'north-east',
23  // Self destroy in 5 seconds
24  timeout: 5000,
25  type: 'warning'
26})
27// or nativeToast.warning(options)
28```
29
30Four types: `success` `warning` `info` `error`
31
32## API
33
34### nativeToast(options)
35
36#### options
37
38##### message
39
40Type: `string`<br>
41Default: `''`
42
43Toast message.
44
45##### position
46
47Type: `string`<br>
48Default: `south-east`<br>
49Values: `center` `west` `east` `south` `south-west` `south-east` `north` `north-west` `north-east`
50
51Toast position.
52
53##### rounded
54
55Type: `boolean`<br>
56Default: `false`
57
58Set `border-radius` to `33px` instead of `3px`. Has no effect when `edge === false`.
59
60##### timeout
61
62Type: `number`<br>
63Default: `3000`
64
65Self destroy in specfic timeout. If given `0` or `false then toast will never self destroy.
66
67##### type
68
69Type: `string`<br>
70Default: `undefined`
71
72One of `success` `warning` `info` `error`.
73
74A short-hand usage: `nativeToast.success(opts)` `nativeToast.error(opts)` and such.
75
76##### icon
77
78Type: `boolean`<br>
79Default: `true`
80
81Set to `false` to disable icon.
82
83##### edge
84
85Type: `boolean`<br>
86Default: `false`
87
88Show toast on the edge.
89
90##### closeOnClick
91
92Type: `boolean`<br>
93Default: `false`
94
95Close the toast when clicked.
96
97##### elements
98
99Type: `HTMLElement[]`
100
101Optionally provide an array of HTML elements to insert after the `message`.
102
103## License
104
105MIT © [EGOIST](https://github.com/egoist)

1	`# native-toast [![NPM version](https://img.shields.io/npm/v/native-toast.svg)](https://npmjs.com/package/native-toast) [![NPM downloads](https://img.shields.io/npm/dm/native-toast.svg)](https://npmjs.com/package/native-toast)`
2
3	`> Native-like toast notification but for the web. (JS + CSS ≈ 4KB)`
4
5	`## Install`
6
7	```bash
8	`$ npm install --save native-toast`
9	```
10
11	`NPMCDN: https://unpkg.com/native-toast/dist/`
12
13	`## Usage`
14
15	First import `native-toast/dist/native-toast.css`, then:
16
17	```js
18	`import nativeToast from 'native-toast'`
19
20	`nativeToast({`
21	`message: 'wait wait!',`
22	`position: 'north-east',`
23	`// Self destroy in 5 seconds`
24	`timeout: 5000,`
25	`type: 'warning'`
26	`})`
27	`// or nativeToast.warning(options)`
28	```
29
30	Four types: `success` `warning` `info` `error`
31
32	`## API`
33
34	`### nativeToast(options)`
35
36	`#### options`
37
38	`##### message`
39
40	Type: `string`<br>
41	Default: `''`
42
43	`Toast message.`
44
45	`##### position`
46
47	Type: `string`<br>
48	Default: `south-east`<br>
49	Values: `center` `west` `east` `south` `south-west` `south-east` `north` `north-west` `north-east`
50
51	`Toast position.`
52
53	`##### rounded`
54
55	Type: `boolean`<br>
56	Default: `false`
57
58	Set `border-radius` to `33px` instead of `3px`. Has no effect when `edge === false`.
59
60	`##### timeout`
61
62	Type: `number`<br>
63	Default: `3000`
64
65	Self destroy in specfic timeout. If given `0` or `false then toast will never self destroy.
66
67	`##### type`
68
69	Type: `string`<br>
70	Default: `undefined`
71
72	One of `success` `warning` `info` `error`.
73
74	A short-hand usage: `nativeToast.success(opts)` `nativeToast.error(opts)` and such.
75
76	`##### icon`
77
78	Type: `boolean`<br>
79	Default: `true`
80
81	Set to `false` to disable icon.
82
83	`##### edge`
84
85	Type: `boolean`<br>
86	Default: `false`
87
88	`Show toast on the edge.`
89
90	`##### closeOnClick`
91
92	Type: `boolean`<br>
93	Default: `false`
94
95	`Close the toast when clicked.`
96
97	`##### elements`
98
99	Type: `HTMLElement[]`
100
101	Optionally provide an array of HTML elements to insert after the `message`.
102
103	`## License`
104
105	`MIT © [EGOIST](https://github.com/egoist)`