reactjs-alert is a lightweight and customizable alert component for React.js applications. Easily create success, warning, error, or info alerts with a clean UI, custom colors, and auto-close functionality. Ideal for enhancing user notifications and impro
npm install reactjs-alertreactjs-alert. **
reactjs-alert is a simple, lightweight, flexible and customizable React.js alert component that helps developers create customizable alerts with ease. It supports multiple alert types like success, warning, error, and info, and comes with options for custom colors, auto-close, and quotes. Ideal for improving user engagement and enhancing notification systems in React applications. Get started in minutes with npm install reactjs-alert.
bash
npm install --save reactjs-alert
`
Or with shorthand:
`bash
npm i reactjs-alert
`
---
$3
| 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
`jsx
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
!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.
$3
`jsx
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 (
type={this.state.type}
title={this.state.title}
Close={() => this.setState({ status: false })}
/>
);
}
}
`
---
$3
`jsx
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 (
onClick={() => {
setStatus(true);
setType("success");
setTitle("This is a success alert");
}}
>
Show Alert
type={type}
title={title}
Close={() => setStatus(false)}
/>
);
}
`
---
🔗 Peer Dependencies
Ensure these dependencies are present in your project:
`json
"peerDependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
`
---
💻 Example with Multiple Alerts
$3
`jsx
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 (
type={this.state.type}
title={this.state.title}
Close={() => this.setState({ status: false })}
/>
);
}
}
`
---
$3
`jsx
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 (
onClick={() => {
setStatus(true);
setType("info");
setTitle("This is an info alert!");
}}
>
Show Info Alert
type={type}
title={title}
isQuotes={true}
quote="This is an example of a ReactJs alert."
Close={() => setStatus(false)}
/>
);
}
``