Add notifications component easily using wc-toast. Vanilla JavaScript web component notification inspired by react-hot-toast
npm install wc-toastAdd notifications component easily using wc-toast. Vanilla JavaScript web component notification inspired by react-hot-toast
- ✍🏻 Easy to use
- 🌏 Use anywhere you like - _[React][react-wc-toast]? [Vue][vue-wc-toast]? [Svelte][svelte-wc-toast]? 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
``bash`
npm i wc-toast
or import from CDN
`js`
import { toast } from 'https://cdn.skypack.dev/wc-toast';

or just try it on https://abdmmar.github.io/wc-toast
1. Make sure you've add wc-toast to your app through NPM or CDN. See Installation for more details.wc-toast
2. Add to your app and placed it at the top.
`html`
3. Start toasting! Call it from anywhere in your app.
`js
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!');
});
`
- [Usage with React][react-wc-toast]
- [Usage with Vue 3][vue-wc-toast]
- [Usage with Svelte][svelte-wc-toast]
[react-wc-toast]: https://stackblitz.com/edit/react-ts-wp4wxh?file=index.tsx
[vue-wc-toast]: https://stackblitz.com/edit/vue-ob3n7x?file=src%2FApp.vue
[svelte-wc-toast]: https://stackblitz.com/edit/vitejs-vite-y98sm9?file=src%2FApp.svelte&terminal=dev
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.
`ts
// wc-toast.d.ts
import { WCToast, WCToastItem, WCToastIcon, WCToastContent, WCToastCloseButton } from 'wc-toast';
declare global {
namespace JSX {
interface IntrinsicElements {
'wc-toast': React.DetailedHTMLProps
'wc-toast-item': React.DetailedHTMLProps
'wc-toast-icon': React.DetailedHTMLProps
'wc-toast-content': React.DetailedHTMLProps<
React.HTMLAttributes
WCToastContent
>;
'wc-toast-close-button': React.DetailedHTMLProps<
React.HTMLAttributes
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
#### Default
##### wc-toast-item
`css`
--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()
`js`
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
`html`
#### wc-toast-item
`html`
theme="light | dark | custom"
duration="number | 3500 | 6000000"
>
#### wc-toast-icon
`html`
#### wc-toast-content
`html`
#### wc-toast-close-button
`html``
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.