React-fresh-toast NPM

React Fresh Toast

🎉 React-Fresh-Toast allows you to add toast/notifications to your app with ease. No more nonsense!

Installation

With yarn

yarn add react-fresh-toast

With NPM

npm install react-fresh-toast

Features

Fresh by Default
Easy to set up for real.
Super easy to customize
Super easy to use an animation of your choice.
Stacked notifications!

Usage

To use React Fresh Toast in your React application, follow these steps:

Import the useToast hook and necessary styles in your component:

import useToast from "react-fresh-toast";

Initialize the useToast hook with your preferred position:

const { ToastContainer, triggerToast } =
  useToast(positon of your choice);

Postions

"bottom-left"
"bottom-right"
"top-left"
"top-right"
"top-center"

Use ToastContainer in your JSX to display toast:

return (
  <div className="App">
    {ToastContainer}
    {/* Your other JSX content */}
  </div>
);

Trigger toast using the triggerToast function:

triggerToast({
  type: "success",
  message: "This is a success message!",
  duration: 3000,  //Optional
  animation: "pop", //Optional
});

Animations

You can specify an animation type for the toast. The available animations are:

"fade"
"pop"
"slide"

triggerToast({
  type: "success",
  message: "This is a success message with a pop animation!",
  duration: 3000,
  animation: "pop",
});

API

useToast(position: PositionType)

This hook returns an object with the following properties:

ToastContainer: React element representing the toast container.
tiggerToast(toastProps: ToastProps): Function to trigger a toast with the specified properties.

ToastProps The tiggerToast function accepts an object of type ToastProps, which includes:

type: Type of the toast (success, info, warning, error).
message: Message to display in the toast.
duration (optional): Duration in milliseconds for which the toast should be displayed.
animation (optional): Animation type for the toast (fade, pop, slide).
onClose (optional): Closing Function for the toast

Example

Here's a basic example of how to use React Fresh Toast :

import React from "react";
import useToast from "react-fresh-toast";

function App() {
  const { ToastContainer, tiggerToast } =
    useToast("top-left");

  const handleButtonClick = () => {
    tiggerToast({
      type: "success",
      message: "This is a success message!",
      duration: 3000,
    });
  };

  return (
    <div className="App">
      {ToastContainer}
      <h1>Toast Component</h1>
      <button onClick={handleButtonClick}>Show Success</button>
    </div>
  );
}

export default App;