@knotel/toast

Reusable Component in Knotel's Design System

Usage no npm install needed!

<script type="module">
  import knotelToast from 'https://cdn.skypack.dev/@knotel/toast';
</script>

README

Cinderblock Toast

Reusable Component in Knotel's Design System

How it's use

  1. Add import
import Toast, { ToastService } from '@knotel/toast'
  1. Insert in entry point of render (for example App.js)
<Toast ref={toastService.init} />
  1. Use following code in any place of code
  import { ToastService } from '@knotel/toast'

  ...

    ToastService.showMessage('Some title', 'Some message')

  ...

Available methods

  • showMessage (title: string, message?: string)
  • showError (title: string, message?: string)
  • showWarning (title: string, message?: string)
  • setConfig (config: object)

Config structure:

{
  message: {
    primaryColor: string,
    secondaryColor: string,
    duration: number,
    imageUrl?: string,
  },
  error: {
    primaryColor: string,
    secondaryColor: string,
    duration: number,
    imageUrl?: string,
  },
  warning: {
    primaryColor: string,
    secondaryColor: string,
    duration: number,
    imageUrl?: string,
  }
}

Storybook