A simple react alert component
npm install react-alert-es6A simple react alert (toaster style) component. Cloned and Added new functionality for support for ES6
You can see a live demo here.
``bash`
$ npm install react-alert
It expects external react, react-dom and react-addons-css-transition-group.
To use it, you have to import the AlertContainer component, like this:
`js
import React from 'react';
import AlertContainer from 'react-alert-es6';
export default class App extends React.Component {
constructor(props){
super(props);
this.alertOptions = {
offset: 14,
position: 'bottom left',
theme: 'dark',
time: 5000,
transition: 'scale'
};
}
showAlert(){
this.msg.show('Some text or component', {
time: 2000,
type: 'success',
icon: 
});
}
render(){
return(
Options
The
AlertContainer component accepts the following options:`js
{
//defaults
offset: 14, //the offset of the alert from the page border, can be any number
position: 'bottom left', //the position of the alert, can be [bottom left, bottom right, top left, top right]
theme: 'dark', //the color theme of the alert, can be [dark, light]
time: 5000, //the time in miliseconds to the alert close itself, use 0 to prevent auto close (apply to all alerts)
transition: 'scale' //the transition animation, can be [scale, fade]
}
`When you call the
show method, you can include the following options as a second parameter:`js
{
time: 0, //the time in miliseconds to the alert close itself, use 0 to prevent auto close (apply to this alert only), default is 5000
type: 'info', //the alert type, can be [info, success, error], default is info
icon:
//the icon to show in the alert, if none is given the default of each type will be showed
}
`Api
Once you have the reference of the
AlertContainer you can call the following methods:`js
//show an alert
this.msg.show('Some message or component');
//show an info alert
this.msg.info('Some info message or component');
//show a success alert
this.msg.success('Some success message or component');
//show an error alert
this.msg.error('Some error message or component');
//removes all alerts from the page
this.msg.removeAll();
`
Using React Components as alert content
You can also use a React Component to show a alert message, like this:
`js
//show an alert with a React Component as content
this.msg.show( );
``