toastique-toast

You can try the demo here.

Installation

$ npm install --save toastique-toast
$ yarn add toastique-toast

The gist

import { toast, ToastList } from 'toastique-toast'

function App() {
  const [toasts, setToasts] = useState([])

  const handleShowToast = () => {
    toast.addToast('success', {
      heading: "Wow",
      content: "I'm an success toast!",
      position: "bottom-left"
    })
    setToasts(toast.getToasts())
  }

  return (
    <div>
      <button type='button' onClick={handleShowToast}>Show</button>
      {toasts.length > 0 && <ToastList toast={toast} toastList={toasts}/>}
    </div>
  );
}

export default App;
  }

options

| Option | Description | default | type | acceptable values | | ------- | ---------------------- | ----------- | --------- | ------------------------ | | heading | toast title | - | String | - | | content | toast text content | - | String | - | | color | toast color |#9f86c0 (info) | String | - | | | | #fee440 (warning) | | | | | | #d62828 (error) | | | | | | #57cc99 (success) | | | | position| toast position on the screen String| 'top-right' | String | 'top-right' / bottom-right' / 'top-left' / 'bottom-left' | | autoCloseTime | toast duration | 5000 | Number | - | | animation| toast appearance |'from bottom'| String |'from bottom' / from right side'| | 'space between toasts' | space beetween each toast | 'medium' | String | 'small' / 'medium' / 'large' |