- πͺΆ Lightweight: ~2.7KB gzipped
- π― Zero dependencies: No external dependencies
- π¨ Fully customizable: Style with any CSS framework (Tailwind, Emotion, etc.)
- β‘ Fast: Optimized for performance
- π§ TypeScript: Full TypeScript support
- π Flexible: Custom icons, colors, and animations
# npm
npm install react-compact-toast
# yarn
yarn add react-compact-toast
# pnpm
pnpm add react-compact-toast
import { ToastContainer, toast } from 'react-compact-toast';
function App() {
return (
<div>
<ToastContainer />
<button
onClick={() => toast({ text: 'Hello World!', position: 'topRight' })}
>
Show Toast
</button>
</div>
);
}
Add the ToastContainer
component to your app (usually in your main App component):
import { ToastContainer } from 'react-compact-toast';
function App() {
return (
<div>
{/* Your app content */}
<ToastContainer />
</div>
);
}
import { toast } from 'react-compact-toast';
// Simple toast
toast('Hello World!');
// Toast with options
toast({
text: 'Custom notification',
position: 'topRight',
autoClose: 5000,
icon: 'π',
});
Find the full API reference on documentation.