react-alert-messages

Features

• Alert messages disappear after fixed time
• Option to configure the alert display time
• Support to show alerts indefinitely
• Option to remove an alert with alert ID
• Option to update existing alert details
• Support multiple pending message with same key and hold the pending message until all get success or failed messages

How to use

• First, install the package using npm or yarn:

  npm install react-alert-messages

  or

  yarn add react-alert-messages

• Import the AlertMessagesContext, AlertMessagesProvider and the useContext hook from react in your component: jsx

  import React, { useContext } from 'react';
  import AlertMessagesProvider, { AlertMessagesContext } from 'react-alert-messages';

• Wrap your root component with the AlertMessagesProvider component, and pass in any necessary options as props: jsx

  function App() {
    return (
      <AlertMessagesProvider position="top-right" timeout={5000}>
      {/* The rest of your application */}
      </AlertMessagesProvider>
    );
  }

• Call the useContext hook to get a reference to the AlertMessagesContext and the postAlertMessage function: jsx

  const { postAlertMessage } = useContext(AlertMessagesContext);

  In this example, we are passing in the text property to the postAlertMessage function. Details of the other properties are provided below in the config details section.

• Use the postAlertMessage function to post an alert message in response to a user action, such as a button click: jsx

  const handleClick = () => {
  postAlertMessage({ text: 'This is a test message' });
  };
    
  return (
    <div>
      {/* The rest of your component */}
      <button onClick={handleClick}>Post message</button>
    </div>
  );

  And that's it! With these steps, you should be able to use react-alert-messages to post customizable alert messages in response to user actions using the AlertMessagesContext and the postAlertMessage function.

Special Use cases

Progress and success/error alert

Can post an indefinite info type alert with loading message with a unique key. After completing the action, the same alert message can be updated to success or error message based on the action's outcome with a fixed timeout.

Multiple progress and one success or failure

Can post multiple pending alert messages and send success and failure updates for each. The alert message handler will hold the progress message until received all success/failure message corresponding to each pending and will show the success/failure based on the update messages.

Config Details

Alert message types

• success
• error
• in-progress

Alert message timeout

The timeout prop specifies how long the alert messages should be displayed before automatically disappearing. Timeout should be passed in milliseconds. This will be defaulted with 2000 if not passed. This will support -1 as value to display the message indefinitely.

How it works

1. AlertMessagesProvider component in AlertMessagesContext.tsx is wrapped with context provider as well as associated function to allow the alert message functionality
2. Child component is wrapped with AlertMessagesProvider to allow the deliver of context.