ts-notification-dialog

Package to provide a reusable React component designed to display notification messages to users in a styled dialog box. It supports different types of notifications such as success, information, warning, and error, each with its respective icon and styling.

Installation

ts-notification-dialog

ts-notification-dialog is available as an npm package.

npm:

npm i ts-notification-dialog

yarn:

yarn add ts-notification-dialog

Getting started with ts-notification-dialog

Example

import React, { useState } from "react";
import NotificationDialog from "ts-notification-dialog";
import "./App.css";

function App() {
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [notificationType, setNotificationType] = useState("");
  const [notificationMessage, setNotificationMessage] = useState("");

  const openNotificationDialog = (type: string, message: string) => {
    setNotificationType(type);
    setNotificationMessage(message);
    setIsDialogOpen(true);
  };

  const closeNotificationDialog = () => {
    setIsDialogOpen(false);
    setNotificationType("");
    setNotificationMessage("");
  };

  return (
    <div className="container">
      <h2>Please select any button to display a notification:</h2>
      <div className="buttonContainer">
        <button
          className="info"
          onClick={() =>
            openNotificationDialog("info", "This is an information message")
          }
        >
          Show Info Notification
        </button>
      </div>
      <div className="buttonContainer">
        <button
          className="success"
          onClick={() =>
            openNotificationDialog("success", "Operation successful")
          }
        >
          Show Success Notification
        </button>
      </div>
      <div className="buttonContainer">
        <button
          className="warning"
          onClick={() =>
            openNotificationDialog("warning", "Warning: Proceed with caution")
          }
        >
          Show Warning Notification
        </button>
      </div>
      <div className="buttonContainer">
        <button
          className="error"
          onClick={() => openNotificationDialog("error", "An error occurred")}
        >
          Show Error Notification
        </button>
      </div>

      <NotificationDialog
        isDialogOpen={isDialogOpen}
        type={notificationType}
        message={notificationMessage}
        onClose={closeNotificationDialog}
      />
    </div>
  );
}

export default App;

Props

| Name | Type | Default | Required | Description | | :----------- | :------: | ------: | :------: | --------------------------------------------------------------------------------------- | | isDialogOpen | boolean | false | yes | Controls whether the dialog is open or closed. | | type | string | | Yes | The type of notification. Possible values are 'success', 'info', 'warning', or 'error'. | | message | string | | Yes | The message content to be displayed in the dialog. | | onClose | function | | Yes | A callback function to be called when the dialog is closed. | | submitLabel | string | Close | No | Custom label for the close button. Defaults to 'Close'. |

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.