Toast-noty NPM

Toast Noty 🚀

🎉 Toast Noty - The next thing that pops on your screen! ✨

Installation

$ npm install --save toast-noty

Changelog

See the CHANGELOG.md file for a history of changes and updates.

Usage

Wrap your application in the ToastsProvider component like so:

<ToastsProvider>
    <Example />
</ToastsProvider>

The useToasts hook will provide you with createToast and removeToast and you can use them as shown below:

import { useToasts } from "hooks/useToasts";

export const Example = () => {
  const { createToast } = useToasts();

  return (
    <button
      onClick={() => createToast({
        type: "warning",
        title: "Achtung!",
        message:
          "There's something happening in your application that needs your attention ⚠️",
        duration: 3,
      })
      }
    >
      Toast Noty!
    </button>
  );
};

Documentation

`createToast`

Creates and displays a new toast with customizable properties.

Parameter	Description	Default Value
`{ id, type, title, message, duration }`	An object containing the toast properties.
`id`	(Optional) Custom `'id'` to use for the notification.	`uuid`
`type`	(Optional) The type of the toast: `'warning'`, `'success'`, or `'danger'`.	`'success'`
`title`	(Optional) The title of the toast.	`type`
`message`	The main message content of the toast.
`duration`	(Optional) The duration (in seconds) the toast should be displayed.	`6`