reactjs-alert
v2.2.0
Published
An unique idea of displaying alerts in pop up with 'reactjs-alert' for different types (i.e. success, warning, error, info). Use type, status, text as props in your code and that's all. You can configure the reactjs-alert with it's avilable props, see doc
Downloads
323
Maintainers
Readme
reactjs-alert
Support
For managing this package I need your support, thank you...
Installation
A simple reactjs alert component. To get started, try installing the reactjs-alert:
npm install --save reactjs-alert
ornpm i reactjs-alert
Working Demo with example code
Example screenshot
How to use
An unique idea of displaying alerts in pop up with 'reactjs-alert' for different types (i.e. success, warning, error, info). Use type, status, text as props in your code and that's all. You can configure the reactjs-alert with it's avilable props, see documentation for a detailed knowledge.
To add this npm to your project run:
npm install --save reactjs-alert
ornpm i reactjs-alert
Import it to your specific project file:
import ReactJsAlert from "reactjs-alert"
...
Finally, add the ReactJsAlert
component in your code:
Class Component
<ReactJsAlert
status={true} // true or false
type="success" // success, warning, error, info
title="Hey! this is an alert." // title you want to display
Close={() => this.setState({ status: false })} // callback method for hide
/>
...
Functional Component
const [status, setStatus] = useState(false);
const [type, setType] = useState("success");
const [title, setTitle] = useState("This is a alert");
<ReactJsAlert
status={status} // true or false
type={type} // success, warning, error, info
title={title}
Close={() => setStatus(false)}
/>
...
This import of ReactJsAlert hook is able to show alerts. And that's it!
Available props
status: true or false *
title: string ( an alert title ) *
type: string ( value : success, warning, error, info ) *
color: string ( hex code [i.e. #f4f4f4] ) (OPTIONAL)
quotes: true or false ( required if you want a quote )
quote: string ( a brief message on alert ) (OPTIONAL)
button: string ( text you want to display in button i.e. 'Try Again' )
autoCloseIn : number (a time after that pop up will be closed i.e. 3000 )
Use a call back method (arrow function) to close it manually
Close: callBackMethod()
( i.e. < Close={() => this.setState({ status: false })} >)
( i.e. < Close={() => setStatus(false)} >)
Peer dependencies
This package expect the following peer dependencies:
"peerDependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
So make sure that you have those installed too!
Example usage
An example of showing alerts simultaneously:
Class Component
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: "Hey! this is an error.",
};
}
render() {
return (
<div className="App">
<ReactJsAlert
status={this.state.status} // true or false
type={this.state.type} // success, warning, error, info
title={this.state.title}
Close={() => this.setState({ status: false })}
/>
</div>
);
}
}
Functional Component
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 className="App">
<button
onClick={() => {
setStatus(true);
setType("success");
setTitle("This is a success alert");
}}
>
Success Alert
</button>
<ReactJsAlert
status={status} // true or false
type={type} // success, warning, error, info
title={title}
quotes={true}
quote="This is a dummy design that shows an example of reactjs-alert"
Close={() => setStatus(false)}
/>
</div>
);
}
Make sure to follow me on github for latest update! Thanks...
This component is built as a package to npm by Sourav Dutta.