reactjs-alert: Lightweight Customizable React.js Alert Component

Simple, lightweight, customizable React.js alert component for better user notifications. An advance and unique alert for React.js applications - reactjs-alert.

🚀 Installation

Install the package via npm:

npm install --save reactjs-alert

Or with shorthand:

npm i reactjs-alert

📫 Available Alert Types

| Alert Type | Description | Color | Usage Syntax | |:----------------|:-------------------------------------------|:----------------|:---------------| | Success | Indicates a successful action or completion. | #00c12c | success | | Warning | Cautions the user about a potential issue. | #ff9900 | warning | | Error | Indicates a serious issue that requires attention. | #de1327 | error | | Critical | Highlights a severe issue that demands immediate action e.g. system outages, security concerns, or urgent messages. | #a71d31 | critical | | Confirmation | Provides feedback when a user confirms an action. | #2a8a2e | confirm | | Notice | Used for maintenance updates or informational notices. | #51bfd0 | notice | | Information | Displays general information or guidance. | #00b0ff | info |

🧩 Example Usage with Props

<ReactJsAlert
  status={true}
  type="error"
  title="Oops! Something went wrong."
  color="#ff4d4f"
  isQuotes={true}
  quote="Please try again later."
  Close={() => setStatus(false)}
/>

⚙️ Available Props

| Prop Name | Type | Description | Required | |-----------------|-----------|------------------------------------------------|:---------:| | status | Boolean | Controls alert visibility (true / false) | Yes | | title | String | Main message text displayed as title | Yes | | type | String | Alert type: choose one of the option from Available Alert Types | Yes | | color | String | Custom background color (Hex code e.g. #de1327) | No | | isQuotes | Boolean | Displays additional quote text (true / false) | No | | quote | String | The additional quote message if isQuotes = true | No | | button | String | Custom button text (e.g. "Try Again", "Submit") | No | | autoCloseIn | Number | Automatically close the alert after X milliseconds | No | | Close (method) | Function | Callback method to manually close the alert | Yes |

📸 Example Screenshot

📋 How to Use

reactjs-alert provides an intuitive way to display alerts for different types like success, warning, error, and info.

Simply import the component and configure it using the available props.

Class Component Example

import React, { Component } from "react";
import ReactJsAlert from "reactjs-alert";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      type: "success",
      status: true,
      title: "Hey! This is a success alert.",
    };
  }

  render() {
    return (
      <div>
        <ReactJsAlert
          status={this.state.status}
          type={this.state.type}
          title={this.state.title}
          Close={() => this.setState({ status: false })}
        />
      </div>
    );
  }
}

Functional Component Example

import React, { useState } from "react";
import ReactJsAlert from "reactjs-alert";

export default function App() {
  const [status, setStatus] = useState(false);
  const [type, setType] = useState("success");
  const [title, setTitle] = useState("This is a success alert");

  return (
    <div>
      <button
        onClick={() => {
          setStatus(true);
          setType("success");
          setTitle("This is a success alert");
        }}
      >
        Show Alert
      </button>

      <ReactJsAlert
        status={status}
        type={type}
        title={title}
        Close={() => setStatus(false)}
      />
    </div>
  );
}

🔗 Peer Dependencies

Ensure these dependencies are present in your project:

"peerDependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
}

💻 Example with Multiple Alerts

Class Component Example

import React, { Component } from "react";
import ReactJsAlert from "reactjs-alert";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      type: "error",
      status: true,
      title: "Oops! Something went wrong.",
    };
  }

  render() {
    return (
      <div>
        <ReactJsAlert
          status={this.state.status}
          type={this.state.type}
          title={this.state.title}
          Close={() => this.setState({ status: false })}
        />
      </div>
    );
  }
}

Functional Component Example

import React, { useState } from "react";
import ReactJsAlert from "reactjs-alert";

export default function App() {
  const [status, setStatus] = useState(false);
  const [type, setType] = useState("");
  const [title, setTitle] = useState("");

  return (
    <div>
      <button
        onClick={() => {
          setStatus(true);
          setType("info");
          setTitle("This is an info alert!");
        }}
      >
        Show Info Alert
      </button>

      <ReactJsAlert
        status={status}
        type={type}
        title={title}
        isQuotes={true}
        quote="This is an example of a ReactJs alert."
        Close={() => setStatus(false)}
      />
    </div>
  );
}

🤝 Contributing

Contributions are welcome! If you have suggestions, improvements, or feature requests, feel free to fork the repository, raise issues, or submit pull requests.

⭐ Support

If you find this package helpful, consider giving it a ⭐ on GitHub.

📢 Follow Me

For updates, projects, and announcements, follow me on Linkedin.

You can also follow me on Twitter.

Built with ❤️ by Sourav Dutta 😊

Happy Coding! 🚀