Toast

An opinionated toast component for React.

'use client'

import { Button } from '@nerdfish/react/button'
import { toast } from '@nerdfish/react/toast'

export default function ToastExample() {
	return (
		<Button
			variant="outline"
			onClick={() =>
				toast('Event has been created', {
					description: 'Sunday, December 03, 2023 at 9:00 AM',
					action: {
						label: 'Undo',
						onClick: () => console.info('Undo'),
					},
				})
			}
		>
			Show Toast
		</Button>
	)
}

Toaster

This needs to be placed in the root component of your application.

function RootLayout({ children }: RootLayoutProps) {
	return (
		<html lang="en">
			<body>
				<Toaster />
				{children}
			</body>
		</html>
	)
}

Examples

'use client'

import { Button } from '@nerdfish/react/button'
import { toast } from '@nerdfish/react/toast'

export default function ToastExamplesExample() {
	return (
		<div className="flex flex-wrap gap-2">
			<Button variant="outline" onClick={() => toast('Event has been created')}>
				Default
			</Button>
			<Button
				variant="outline"
				onClick={() => toast.success('Event has been created')}
			>
				Success
			</Button>
			<Button
				variant="outline"
				onClick={() =>
					toast.info('Be at the area 10 minutes before the event time')
				}
			>
				Info
			</Button>
			<Button
				variant="outline"
				onClick={() =>
					toast.warning('Event start time cannot be earlier than 8am')
				}
			>
				Warning
			</Button>
			<Button
				variant="outline"
				onClick={() => toast.error('Event has not been created')}
			>
				Error
			</Button>
			<Button
				variant="outline"
				onClick={() => {
					toast.promise<{ name: string }>(
						() =>
							new Promise((resolve) =>
								setTimeout(() => resolve({ name: 'Event' }), 2000),
							),
						{
							loading: 'Loading...',
							success: (data: { name: any }) => `${data.name} has been created`,
							error: 'Error',
						},
					)
				}}
			>
				Promise
			</Button>
		</div>
	)
}