Getting started

Compatibility

Your project needs to use React 16.8 or later.

Installation

Add react-message to your project by executing npm install react-message-cs or yarn add react-message-cs.

Usage

Here's an example of basic usage:

import { useState } from 'react';
import Message from 'react-message-cs';
import "react-message-cs/dist/message.css";

function MyApp() {
  const [messages, setMessages] = useState([]);

  const handleClick = (type, text, icon, duration) => {
    setMessages((prevMessages) => [
      ...prevMessages,
      { id: Math.random(), type, text, icon, duration }
    ]);
  };

  return (
    <>
  <div>
        <button onClick={() => handleClick("neutral", "Editing is restricted", <FaInfoCircle />, 3000)}>Show Neutral</button>
        <button onClick={() => handleClick("info", "Please read the comments carefully", <FaInfoCircle />, 30000)}>Show Info</button>
        <button onClick={() => handleClick("success", "Your message has been sent successfully", <FaCheckCircle />, 20000)}>Show Success</button>
        <button onClick={() => handleClick("warning", "There was a problem with your network connection", <FaExclamationTriangle />, 5000)}>Show Warning</button>
        <button onClick={() => handleClick("error", "A problem occurred while submitting your data", <FaTimesCircle />, 7000)}>Show Error</button>

        <div className="message-container">
          {messages.map((msg) => (
            <Message
              key={msg.id}
              type={msg.type}
              text={msg.text}
              icon={msg.icon}
              onClose={() => setMessages((msgs) => msgs.filter((m) => m.id !== msg.id))}
            />
          ))}
        </div>
      </div>
      </>
  );
}

License

The MIT License.

Thank you