A simple and customizable React component for displaying alert notifications.

Installation

Install the package using npm or yarn:

npm install react-ts-droid-alert-notification

or

yarn add react-ts-droid-alert-notification

Usage

Import and use the AlertNotification component in your React application:

import React from "react";
import { AlertNotification } from "react-ts-droid-alert-notification";

const App = () => {
  return (
    <div>
      <AlertNotification type="success" message="This is a success alert!" />
      <AlertNotification type="error" message="This is an error alert!" />
      <AlertNotification type="warning" message="This is a warning alert!" />
    </div>
  );
};

export default App;

Props

The AlertNotification component accepts the following props:

| Prop Name | Type | Description | | --------- | --------------------------------- | ---------------------------------------------- | | type | "success" | "error" | "warning" | Specifies the type of alert (affects styling). | | message | string | The message displayed inside the alert. |

Styling

The component comes with basic styles that you can customize. The CSS classes are:

• .alert - Base alert styling
• .success - Styles for success messages
• .error - Styles for error messages
• .warning - Styles for warning messages
• .closebtn - Styling for the close button

To customize the styles, override them in your own CSS file.

.alert {
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 5px;
}

.success {
  background-color: #d4edda;
  color: #155724;
}

.error {
  background-color: #f8d7da;
  color: #721c24;
}

.warning {
  background-color: #fff3cd;
  color: #856404;
}

.closebtn {
  cursor: pointer;
  float: right;
  font-size: 18px;
}