wc-toast
Advanced tools
Readme
Add notifications component easily using wc-toast. Vanilla JavaScript web component notification inspired by react-hot-toast
Add from NPM
npm i wc-toast
or 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-toast to your app through NPM or CDN. See Installation for more details.
Add wc-toast to 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.
FAQs
Add notifications component easily using wc-toast. Vanilla JavaScript web component notification inspired by react-hot-toast
The npm package wc-toast receives a total of 152 weekly downloads. As such, wc-toast popularity was classified as not popular.
We found that wc-toast demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.