@knotel/toast

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,
  }
}