An opinionated toast component for Solid.
npm install solid-sonner

An opinionated toast component for Solid.
Based on the React implementation.
Install it:
``bash`
npm i solid-sonneror
yarn add solid-sonneror
pnpm add solid-sonner
Add to your app, it will be the place where all your toasts will be rendered. After that you can use toast() from anywhere in your app.
`tsx
import { Toaster, toast } from 'solid-sonner'
// ...
function App() {
return (
Types
$3
Most basic toast. You can customize it (and any other type) by passing an options object as the second argument.
`jsx
toast('Event has been created')
`With custom icon and description:
`jsx
toast('Event has been created', {
description: 'Monday, January 3rd at 6:00pm',
icon: ,
})
`$3
Renders a checkmark icon in front of the message.
`jsx
toast.success('Event has been created')
`$3
Renders an error icon in front of the message.
`jsx
toast.info('Event has new information')
`$3
Renders an error icon in front of the message.
`jsx
toast.warning('Event has warning')
`$3
Renders an error icon in front of the message.
`jsx
toast.error('Event has not been created')
`$3
Renders a button.
`jsx
toast('Event has been created', {
action: {
label: 'Undo',
onClick: () => console.log('Undo'),
},
})
`$3
Starts in a loading state and will update automatically after the promise resolves or fails.
`jsx
toast.promise(() => new Promise(resolve => setTimeout(resolve, 2000)), {
loading: 'Loading',
success: 'Success',
error: 'Error',
})
`You can pass a function to the success/error messages to incorporate the result/error of the promise.
`jsx
toast.promise(promise, {
loading: 'Loading...',
success: (data) => {
return ${data.name} has been added!
},
error: 'Error',
})
`$3
Renders a toast with a loading spinner. Useful when you want to handle various states yourself instead of using a promise toast.
`jsx
toast.loading('Loading data')
`$3
You can pass jsx as the first argument instead of a string to render custom jsx while maintaining default styling. You can use the headless version below for a custom, unstyled toast.
`jsx
toast(A custom toast with default styling)
`$3
You can update a toast by using the
toast function and passing it the id of the toast you want to update, the rest stays the same.`jsx
const toastId = toast('Sonner')toast.success('Toast has been updated', {
id: toastId,
})
`Customization
$3
You can use
toast.custom to render an unstyled toast with custom jsx while maintaining the functionality.`jsx
toast.custom(t => (
This is a custom component
))
`$3
You can change the theme using the
theme prop. Default theme is light.`jsx
`$3
You can change the position through the
position prop on the component. Default is bottom-right.`jsx
// Available positions
// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
`$3
Toasts can also be expanded by default through the
expand prop. You can also change the amount of visible toasts which is 3 by default.`jsx
`$3
Styling can be done globally via
toastOptions, this way every toast will have the same styling.`jsx
toastOptions={{ style: { background: 'red' }, class: 'my-toast', descriptionClass: 'my-toast-description' }}
/>
`You can also use the same props when calling toast to style a specific toast.
`jsx
toast('Event has been created', {
style: {
background: 'red',
},
class: 'my-toast',
descriptionClass: 'my-toast-description',
})
`$3
The preferred way to style the toasts with tailwind is by using the
unstyled prop. That will give you an unstyled toast which you can then style with tailwind.`tsx
toastOptions={{
unstyled: true,
classes: {
toast: 'bg-blue-400',
title: 'text-red-400',
description: 'text-red-400',
actionButton: 'bg-zinc-400',
cancelButton: 'bg-orange-400',
closeButton: 'bg-lime-400',
},
}}
/>
`You can do the same when calling
toast().`tsx
toast('Hello World', {
unstyled: true,
classes: {
toast: 'bg-blue-400',
title: 'text-red-400 text-2xl',
description: 'text-red-400',
actionButton: 'bg-zinc-400',
cancelButton: 'bg-orange-400',
closeButton: 'bg-lime-400',
},
})
`Styling per toast type is also possible.
`tsx
toastOptions={{
unstyled: true,
classes: {
error: 'bg-red-400',
success: 'text-green-400',
warning: 'text-yellow-400',
info: 'bg-blue-400',
},
}}
/>
`$3
Add a close button to all toasts that shows on hover by adding the
closeButton prop.`jsx
`$3
You can make error and success state more colorful by adding the
richColors prop.`jsx
`$3
Offset from the edges of the screen.
`jsx
`$3
To remove a toast programmatically use
toast.dismiss(id).`jsx
const toastId = toast('Event has been created')toast.dismiss(toastId)
`You can also use the dismiss method without the id to dismiss all toasts.
`jsx
// Removes all toaststoast.dismiss()
`$3
You can change the duration of each toast by using the
duration property, or change the duration of all toasts like this:`jsx
``jsx
toast('Event has been created', {
duration: 10000,
})// Persisent toast
toast('Event has been created', {
duration: Number.POSITIVE_INFINITY,
})
`$3
You can pass
onDismiss and onAutoClose callbacks. onDismiss gets fired when either the close button gets clicked or the toast is swiped. onAutoClose fires when the toast disappears automatically after it's timeout (duration prop).`jsx
toast('Event has been created', {
onDismiss: t => console.log(Toast with id ${t.id} has been dismissed),
onAutoClose: t => console.log(Toast with id ${t.id} has been closed automatically),
})
`Keyboard focus
You can focus on the toast area by pressing ⌥/alt + T. You can override it by providing an array of event.code values for each key.
`jsx
``MIT