Add notifications component easily using wc-toast. Vanilla JavaScript web component notification inspired by react-hot-toast
- ✍🏻 Easy to use
- 🌏 Use anywhere you like - React? Vue? Svelte? Everywhere!
- 👋🏻 Emoji and SVG Support
- 🎨 Customizable
- 🚥 Promise API
- ✅ Accessible - Tested using Windows 10 Narrator
- 🍃 Lightweight - Only ~3.6KB Minified+Gzipped including styles
- 💙 Dark Mode
Add from NPM
npm i wc-toastor import from CDN
import { toast } from 'https://cdn.skypack.dev/wc-toast';or just try it on https://abdmmar.github.io/wc-toast
-
Make sure you've add
wc-toastto your app through NPM or CDN. See Installation for more details. -
Add
wc-toastto your app and placed it at the top.<body> <wc-toast></wc-toast> <button class="toast"></button> </body>
-
Start toasting! Call it from anywhere in your app.
import { toast } from 'wc-toast' // or if you use CDN: // import { toast } from 'https://cdn.skypack.dev/wc-toast'; document.querySelector('.toast').addEventListener('click', () => { toast('Hello world!'); });
If you are using the wc-toast in a React TypeScript project, you'll need to add wc-toast.d.ts type definitions to ensure proper type checking.
// wc-toast.d.ts
import { WCToast, WCToastItem, WCToastIcon, WCToastContent, WCToastCloseButton } from 'wc-toast';
declare global {
namespace JSX {
interface IntrinsicElements {
'wc-toast': React.DetailedHTMLProps<React.HTMLAttributes<WCToast>, WCToast>;
'wc-toast-item': React.DetailedHTMLProps<React.HTMLAttributes<WCToastItem>, WCToastItem>;
'wc-toast-icon': React.DetailedHTMLProps<React.HTMLAttributes<WCToastIcon>, WCToastIcon>;
'wc-toast-content': React.DetailedHTMLProps<
React.HTMLAttributes<WCToastContent>,
WCToastContent
>;
'wc-toast-close-button': React.DetailedHTMLProps<
React.HTMLAttributes<WCToastCloseButton>,
WCToastCloseButton
>;
}
}
}If you are using Vite, place your wc-toast.d.ts inside src/ folder
You can customize style of wc-toast-item through custom properties
--wc-toast-background: #fff;
--wc-toast-max-width: 350px;
--wc-toast-stroke: #2a2a32;
--wc-toast-color: #000;
--wc-toast-font-family: 'Roboto', sans-serif;
--wc-toast-font-size: 16px;
--wc-toast-border-radius: 8px;
--wc-toast-content-margin: 4px 10px;toast(
message: string,
options: {
icon: {
type: 'success' | 'loading' | 'error' | 'custom' | 'svg';
content: string;
};
duration: number | 4000;
theme: {
type: 'light' | 'dark' | 'custom';
style: {
background: string;
color: string;
stroke: string;
};
};
})<wc-toast position="top-left | top-right | top-center | bottom-left | bottom-right | bottom-center">
<slot></slot>
</wc-toast><wc-toast-item
type="success | loading | error | blank | custom"
theme="light | dark | custom"
duration="number | 3500 | 6000000"
>
<slot></slot>
</wc-toast-item><wc-toast-icon icon="string" type="success | loading | error | blank | custom">
<slot name="svg"></slot>
</wc-toast-icon><wc-toast-content message="string">
<slot name="message"></slot>
<slot name="content"></slot>
</wc-toast-content><wc-toast-close-button></wc-toast-close-button>See CONTRIBUTING.md
Thanks to react-hot-toast for an amazing library and such an inspiration. If you build a React project and need notifications, you should check out this library.