Solid Sonner

https://github.com/wobsoriano/solid-sonner
Admin
Solid Sonner is an opinionated toast component for SolidJS that tracks the React Sonner API as...
Tokens:1,572
Snippets:23
Trust Score:9.3
License:MIT
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install solid-sonner

Source: https://github.com/wobsoriano/solid-sonner/blob/main/README.md

Installation commands for common package managers.

```bash
npm i solid-sonner
# or
yarn add solid-sonner
# or
pnpm add solid-sonner
```

--------------------------------

### Quick start with Toaster

Source: https://github.com/wobsoriano/solid-sonner/blob/main/README.md

Basic implementation of the Toaster component and toast trigger.

```tsx
import { Toaster, toast } from 'solid-sonner'

export default function App() {
  return (
    <div>
      <Toaster />
      <button onClick={() => toast('My first toast')}>Give me a toast</button>
    </div>
  )
}
```

--------------------------------

### Configure toast with metadata

Source: https://github.com/wobsoriano/solid-sonner/blob/main/README.md

Adding descriptions, icons, and action buttons to a toast.

```tsx
toast('Event has been created', {
  description: 'Monday, January 3rd at 6:00pm',
  icon: <MyIcon />,
  action: {
    label: 'Undo',
    onClick: () => console.log('Undo'),
  },
  cancel: {
    label: 'Cancel',
  },
})
```

--------------------------------

### Create headless custom toasts

Source: https://github.com/wobsoriano/solid-sonner/blob/main/README.md

Rendering custom JSX content within a toast.

```tsx
toast.custom(id => (
  <div>
    Custom toast <button onClick={() => toast.dismiss(id)}>close</button>
  </div>
))
```

--------------------------------

### toast.promise(promise, data)

Source: https://github.com/wobsoriano/solid-sonner/blob/main/README.md

Handles promise-based toast notifications, showing different states for loading, success, and error.

```APIDOC
## toast.promise(promise, data)

### Description
Automatically updates the toast based on the lifecycle of the provided promise.

### Parameters
- **promise** (Promise) - Required - The promise to track.
- **data** (object) - Required - Object containing `loading` string, and `success`/`error` functions or strings to define the resulting toast state.
```

--------------------------------

### Manage multiple toasters

Source: https://github.com/wobsoriano/solid-sonner/blob/main/README.md

Using multiple Toaster instances by assigning unique IDs.

```tsx
<>
  <Toaster />
  <Toaster id="sidebar" position="top-left" />
</>

toast('Global toast')
toast('Sidebar toast', { toasterId: 'sidebar' })
```

--------------------------------

### toast(message, options)

Source: https://github.com/wobsoriano/solid-sonner/blob/main/README.md

Triggers a standard toast notification. Supports various variants like success, info, warning, error, and loading.

```APIDOC
## toast(message, options)

### Description
Displays a toast notification. Variants are available via `toast.success()`, `toast.info()`, `toast.warning()`, `toast.error()`, and `toast.loading()`.

### Parameters
- **message** (string) - Required - The text content of the toast.
- **options** (ExternalToast) - Optional - Configuration object including description, icon, action, cancel, and duration.
```

--------------------------------

### Apply Tailwind or unstyled mode

Source: https://github.com/wobsoriano/solid-sonner/blob/main/README.md

Customizing toast appearance using unstyled mode and classNames.

```tsx
<Toaster
  toastOptions={{
    unstyled: true,
    classNames: {
      toast: 'bg-blue-500 text-white',
      title: 'font-semibold',
      description: 'text-blue-100',
      actionButton: 'bg-white text-blue-700',
      cancelButton: 'bg-blue-700 text-white',
      closeButton: 'bg-white text-black',
    },
  }}
/>
```

--------------------------------

### Configure Toaster props

Source: https://github.com/wobsoriano/solid-sonner/blob/main/README.md

Advanced configuration for the Toaster component, including positioning and styling.

```tsx
<Toaster
  theme="system"
  position="top-right"
  richColors
  closeButton
  expand
  visibleToasts={5}
  duration={5000}
  gap={14}
  offset={32}
  mobileOffset={{ bottom: 24, left: 16, right: 16 }}
  hotkey={['altKey', 'KeyT']}
  dir="auto"
  swipeDirections={['top', 'right']}
  containerAriaLabel="Notifications"
  toastOptions={{
    className: 'my-toast',
    descriptionClassName: 'my-toast-description',
    closeButtonAriaLabel: 'Close notification',
    classNames: {
      toast: 'toast',
      title: 'title',
      description: 'description',
    },
  }}
/>
```

--------------------------------

### Toaster Component

Source: https://github.com/wobsoriano/solid-sonner/blob/main/README.md

The root component required to render toasts in the application.

```APIDOC
## <Toaster />

### Description
Must be placed in the component tree to render toasts. Supports configuration via props like `position`, `theme`, `richColors`, and `toastOptions`.
```

--------------------------------

### Handle promise-based toasts

Source: https://github.com/wobsoriano/solid-sonner/blob/main/README.md

Managing toast states based on the resolution or rejection of a promise.

```tsx
toast.promise(fetchData(), {
  loading: 'Loading...',
  success: data => `${data.name} has been added!`,
  error: 'Error',
})
```

```tsx
toast.promise(saveProject(), {
  loading: 'Saving...',
  success: result => ({
    message: 'Project saved',
    description: result.id,
  }),
  error: error => ({
    message: 'Save failed',
    description: String(error),
  }),
})
```

--------------------------------

### Display different toast types

Source: https://github.com/wobsoriano/solid-sonner/blob/main/README.md

Standard toast variants available for different notification contexts.

```tsx
toast('Event has been created')
toast.success('Event has been created')
toast.info('Event has new information')
toast.warning('Event has warning')
toast.error('Event has not been created')
toast.loading('Loading data')
```

--------------------------------

### toast.dismiss(id)

Source: https://github.com/wobsoriano/solid-sonner/blob/main/README.md

Dismisses one or all active toasts.

```APIDOC
## toast.dismiss(id)

### Description
Removes a specific toast by ID, or all toasts if no ID is provided.

### Parameters
- **id** (string|number) - Optional - The ID of the toast to dismiss.
```

--------------------------------

### Update and dismiss toasts

Source: https://github.com/wobsoriano/solid-sonner/blob/main/README.md

Programmatically updating or removing toasts using their ID.

```tsx
const id = toast('Uploading...', { duration: Number.POSITIVE_INFINITY })

toast.success('Done', { id })
toast.dismiss(id)
toast.dismiss()
```

--------------------------------

### Read toast state

Source: https://github.com/wobsoriano/solid-sonner/blob/main/README.md

Accessing current toast state using the useSonner hook or global methods.

```tsx
const { toasts } = useSonner()

toast.getToasts()
toast.getHistory()
```
Tokens:
Raw