rd-react-simple-toast-notification
TypeScript icon, indicating that this package has built-in type declarations

1.0.4 • Public • Published

rd-react-simple-toast-notification

rd-react-simple-toast-notification is a simple and customizable toast notification component for React applications.

Preview

preview

Installation

You can install rd-react-simple-toast-notification via npm:

npm install rd-react-simple-toast-notification

Usage

To use rd-react-simple-toast-notification in your React application, follow these steps:

Import the useNotification hook and necessary styles in your component:

import useNotification from "rd-react-simple-toast-notification";

Initialize the useNotification hook with your preferred position:

const { NotificationComponent, triggerNotification } =
  useNotification("top-right");

Positions

  • "bottom-left"
  • "bottom-right"
  • "top-left"
  • "top-right"

Use NotificationComponent in your JSX to display notifications:

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

Trigger notifications using the triggerNotification function:

triggerNotification({
  type: "success",
  message: "This is a success message!",
  duration: 3000,
});

Animations

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

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

API

useNotification(position: PositionType)

This hook returns an object with the following properties:

  • NotificationComponent: React element representing the notification container.
  • triggerNotification(notificationProps: NotificationProps): Function to trigger a notification with the specified properties.

NotificationProps The triggerNotification function accepts an object of type NotificationProps, which includes:

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

Example

Here's a basic example of how to use rd-react-simple-toast-notification:

import React from "react";
import useNotification from "rd-react-simple-toast-notification";

function App() {
  const { NotificationComponent, triggerNotification } =
    useNotification("top-right");

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

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

export default App;

Package Sidebar

Install

npm i rd-react-simple-toast-notification

Weekly Downloads

0

Version

1.0.4

License

ISC

Unpacked Size

1.8 MB

Total Files

14

Last publish

Collaborators

  • irahuldutta02