solid-sonner-toast

This is an unofficial port of sonner for Solid.js, just for learning and interest. And there is already a port called solid sonner

I'm pleased if you still want to try it out and here is the document built with solid-start.

Getting started

Install

pnpm i solid-sonner-toast 

Add Toaster to your App

// @refresh reload
import { Suspense } from 'solid-js'
import { Toaster } from 'solid-sonner-toast'

import { Router } from '@solidjs/router'
import { FileRoutes } from '@solidjs/start'

import './app.css'
import BaseLayout from './components/base-layout'

export default function App() {
  return (
    <Router
      root={(props) => (
        <BaseLayout>
          <Suspense>{props.children}</Suspense>
        </BaseLayout>
      )}
    >
      <Toaster />
      <FileRoutes />
    </Router>
  )
}

Render a toast

Use toast() to render a toast

import { toast } from 'solid-sonner-toast'

const Button = () => {
  return <button onClick={() => toast('Hello world')}>Hello world</button>
}

toast()

Property	Description	Default
description	Toast's description, renders underneath the title.	-
position	Position of the toast.	bottom-right
duration	Time in milliseconds that should elapse before automatically closing the toast.	4000
dismissible	If false, it'll prevent the user from dismissing the toast.	true
icon	Icon displayed in front of toast's text, aligned vertically.	-
action	Renders a primary button, clicking it will close the toast.	-
cancel	Renders a secondary button, clicking it will close the toast.	-
id	Custom id for the toast.	-
onDismiss	The function gets called when either the close button is clicked, or the toast is swiped.	-
onAutoClose	Function that gets called when the toast disappears automatically after it's timeout (duration` prop).	-
unstyled	Removes the default styling, which allows for easier customization.	false
actionButtonStyles	Styles for the action button	{}
cancelButtonStyles	Styles for the cancel button	{}

Toaster

Property	Description	Default
theme	Toast's theme, either light, dark, or system	light
richColors	Makes error and success state more colorful	false
expand	Toasts will be expanded by default	false
visibleToasts	Amount of visible toasts	3
position	Place where the toasts will be rendered	bottom-right
closeButton	Adds a close button to all toasts	false
offset	Offset from the edges of the screen.	32px
dir	Directionality of toast's text	ltr
invert	Dark toasts in light mode and vice versa.	false
gap	Gap between toasts when expanded	14
loadingIcon	Changes the default loading icon	-