@smashing/toaster

Component used for notifications

Usage no npm install needed!

<script type="module">
  import smashingToaster from 'https://cdn.skypack.dev/@smashing/toaster';
</script>

README

yarn add @smashing/toaster

Default appearance

<Button onClick={() => toaster.success('Successful alert!')}>Success</Button>

With Description

<Button
  onClick={() =>
    toaster.success('Successful alert!', {description: 'Hello World!'})
  }
/>

With custom duration

<Button onClick={() => toaster.success('Successful alert!', {duration: 5})}>
  Success 5s
</Button>

Close all toasters

<Button onClick={toaster.closeAll}>Close all</Button>

Unique toast

<Button
  onClick={() =>
    toaster.success('Only one toaster will be shown', {id: 'forbidden-action'})
  }
>
  Success
</Button>