https://poply.dev
🎉 Lightweight toast component for React 🎉
# pnpm (recommended):
pnpm add poply
# npm:
npm install poply
# yarn:
yarn add poplyAdd <Toaster /> to your app component:
import { Toaster, toast } from 'poply';
function App() {
return (
<div>
<button onClick={() => toast.info('Hello world!')}>Toast</button>
<Toaster />
</div>
)
}Import Toaster and render it inside of a Client Coponent:
// app/toaster-provider.tsx
'use client'
import { Toaster } from 'poply';
export default function ToasterProvider({ children }: { children: React.ReactNode }) {
return (
<>
{children}
<Toaster />
</>
);
}As your provider has been marked as a Client Component, your Server Component can now directly render it:
// app/layout.tsx
import ToasterProvider from './toaster-provider';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
<ToasterProvider>
{children}
</ToasterProvider>
</body>
</html>
);
}Toaster component accepts following props:
| Prop | Description |
|---|---|
| bgColor | Color of toast background |
| textColor | Color of text and close icon |
| customComponent | Custom component to render toast |
| position | Position of toast container |
| maxToasts | Maximum number of toasts to show |
| maxToastsPerMessage | Maximum number of toasts per message |
import { Toaster, toast } from 'poply';
import { CustomToast } from './components/custom-toast';
function App() {
return (
<div>
<button onClick={() => toast.info('Hello world!')}>Toast</button>
<Toaster customComponent={({ message, type }) => <CustomToast message={message} type={type} />} />
</div>
)
}Licensed under MIT