reactjs-alert
Version:
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
266 lines (201 loc) • 7.79 kB
Markdown
# reactjs-alert: Lightweight Customizable React.js Alert Component
    
**Simple, lightweight, customizable React.js alert component for better user notifications. <br>
<i>An advance and unique alert for React.js applications - `reactjs-alert`. </i>**
<blockquote>
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.
</blockquote>
## 🚀 Installation
Install the package via npm:
```bash
npm install --save reactjs-alert
```
Or with shorthand:
```bash
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
```jsx
<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
```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 (
<div>
<ReactJsAlert
status={this.state.status}
type={this.state.type}
title={this.state.title}
Close={() => this.setState({ status: false })}
/>
</div>
);
}
}
```
### Functional Component Example
```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 (
<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:
```json
"peerDependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
```
## 💻 Example with Multiple Alerts
### Class Component Example
```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 (
<div>
<ReactJsAlert
status={this.state.status}
type={this.state.type}
title={this.state.title}
Close={() => this.setState({ status: false })}
/>
</div>
);
}
}
```
### Functional Component Example
```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 (
<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](https://github.com/sourav-oss).
## 📢 Follow Me
For updates, projects, and announcements, follow me on [Linkedin](https://in.linkedin.com/in/sourav-dutta-133a95149).
You can also follow me on [Twitter](https://twitter.com/_DuttaSourav).
**Built with ❤️ by Sourav Dutta 😊**
### Happy Coding! 🚀