AlertNotification

AlertNotification is a pre-compiled React component for displaying alert messages with different types (success, error, warning). It's built with TypeScript and styled-components, providing a clean and modern design that's ready to use out of the box.

Features

• Three alert types: success, error, and warning
• Customizable message content
• Closable alerts
• Pre-styled with a modern design
• TypeScript support for type safety

Installation

To use the AlertNotification component in your React application, install it via npm:

npm install @droid-tech/react-ts-alert-notification

Usage

To use the AlertNotification component, import it and provide the required props:

import { AlertNotification } from "@droid-tech/react-ts-alert-notification";

const MyComponent = () => {
  return (
    <AlertNotification
      type="success"
      message="Operation completed successfully!"
    />
  );
};

Props

The AlertNotification component accepts the following props:

| Prop | Type | Required | Description | |-----------|----------------------------------|----------|------------------------------------| | type | "success" \| "error" \| "warning" | Yes | The type of alert to display | | message | string | Yes | The message to show in the alert |

Alert Types

The AlertNotification component supports three types of alerts, each with its own color scheme:

• success: Green color scheme
• warning: Yellow color scheme
• error: Red color scheme

Behavior

• The alert is displayed by default when the component is rendered.
• A close button (×) is provided in the top-right corner of the alert.
• Clicking the close button will hide the alert.

Accessibility

The AlertNotification component is designed with accessibility in mind. The close button is clearly visible and interactive, allowing users to dismiss the alert easily.

Conclusion

The AlertNotification component provides a simple and ready-to-use way to display alert messages in your React application. With its different alert types and closable functionality, it can easily integrate into your project to provide informative feedback to users.