Features

• Easy to use
• Customizable
• Dark mode
• Lightweight
• Accessible

Installation

With NPM

npm install makki-toast@latest

Getting Started

Add the makki toast and it will take care of render the alerts.

Import Makki Toast

import { Toast } from 'makki-toast'

Info

const toast = new Toast()

const handleToast = () => {
  toast.info('Simple text', false)
}

Success

const toast = new Toast()

const handleToast = () => {
  toast.success('Simple text', false)
}

Warning

const toast = new Toast()

const handleToast = () => {
  toast.warning('Simple text', false)
}

Danger

const toast = new Toast()

const handleToast = () => {
  toast.danger('Simple text', false)
}

Custom

import { Toast } from 'makki-toast'

const App = () => {
  const toast = new Toast()

  const handleToast = () => {
    toast.show({
      autoClose: 5000,
      darkMode: false,
      message: 'Simple text',
      position: 'top-right'
    })
  }
  
  return (
    <div>
      <button onClick={handleToast}>Show Makki Toast</button>
    </div>
  )
}

Documentation

Find the full documentation on official documentation