tun-nyein-toast
v1.1.3
Published
Tiny toast notification
Maintainers
annexy123tnReadme
tun-nyein-toast
A lightweight, customizable toast notification library for React with zero dependencies.
for dev
pnpm install
pnpm dev
Usage in components
✨ Features
- 🚀 Tiny (< 2KB minified + gzipped)
- 🎨 Customizable types & positions
- 🕒 Auto-dismiss with manual close
- ⌨️ Fully accessible (ARIA-compliant)
- 📦 TypeScript support out of the box
- 🔌 Works with Vite, Next.js, Create React App
📦 Installation
# npm
npm install tun-nyein-toast
# pnpm (recommended)
pnpm add tun-nyein-toast
# yarn
yarn add tun-nyein-toast
🔧 Setup
1. Wrap your app with ToastProvider
The ToastProvider manages toast state and renders the toast container. Place it once near the root of your app.
Vite / Create React App (src/main.tsx)
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ToastProvider } from 'tun-nyein-toast';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<ToastProvider>
<App />
</ToastProvider>
</React.StrictMode>
);
Next.js App Router (app/layout.tsx)
'use client';
import { ToastProvider } from 'tun-nyein-toast';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<body>
<ToastProvider>
{children}
</ToastProvider>
</body>
</html>
);
}
🚀 Usage
Use the useToast hook anywhere inside your app (as long as it’s wrapped by ToastProvider).
Basic Example
'use client';
import { useToast } from 'tun-nyein-toast';
export default function MyComponent() {
const { addToast } = useToast();
return (
<button onClick={() => addToast('Hello, world!')}>
Show Toast
</button>
);
}
Custom Toast Options
const { addToast } = useToast();
// Success toast at top center
addToast('Data saved successfully!', {
type: 'success',
position: 'top-center',
duration: 4000,
color: 'white',
bgColor: '#000000',
});
// Error toast (auto uses bottom-right)
addToast('Failed to connect', {
type: 'error'
});
// Persistent toast (won’t auto-dismiss)
addToast('Manual close required', {
duration: 0
});
📚 API
addToast(message, options?)
Shows a new toast notification.
Parameters:
Name Type Required
message string Yes
options.type | 'success' No
| 'error'
| 'warning
options.position |'top-right' No
| 'top-left'
| 'top-right'
| 'top-center'
| 'bottom-left'
| 'bottom-right'
| 'bottom-center'
options.duration number No
options.color `#`000000 (hex) No
options.bgColor `#`ffffff (hex) No
Returns: number — a unique ID for the toast (can be used with removeToast).
📄 License
IMU @tunnyein8870