The challenge was to create a notification library under 1 KB.
Toastinette is an ultra-lightweight (minified CSS + JS <= 1 KB) notification library with no dependencies. It does not accept user input and there is no progress bar.
| File | Size (bytes) |
|---|---|
| toastinette.min.js | 696 B |
| toastinette.min.css | 328 B |
| Total | 1024 B |
npm i --save toastinette
In the <head> section:
<link rel="stylesheet" type="text/css" href="dist/toastinette.min.css">At the bottom of the <body>:
<script src="dist/toastinette.min.js"></script>Toastinette.show(type, duration, html);Creates a new toast.
type: Either'success','info','warning'or'error'duration: Show duration in mshtml: HTML code of the toast
Toastinette.setPosition(position, margin = 12);Set the position of the toasts.
position:'tl'for top left,'tr'for top right,'br'for bottom right (default) or'bl'for bottom leftmargin: Optional. The margin in px. Default is 12px.