Skip to content

Ken-HH24/solid-sonner-toast

Repository files navigation

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 -

About

An opinionated toast component for Solid.js

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published