react-material-alert
v2.0.1
Published
![dependencies-image-url]
Downloads
38
Readme
README
react-material-alert is a lightweight library for displaying UI alerts in the google material design way.
Prerequisites
In order to have the library up and running, your project must have webpack and some loaders installed.
Please refer to the demo which has the minimum necessary webpack loaders for using react-material-alert.
Installation
$> npm i react-material-alert
Usage
require Alert tag:
var Alert = require('react-material-alert').Alert;
require Nature types:
var Natures = require('react-material-alert').Natures;
render tag in jsx:
<Alert alert={myAlert} id={"justLikeHtmlId"} />
The myAlert
variable is a json that you would have declared like so:
var myAlert = {nature:myNature, content:"this is an alert!"};
The myNature
will have the value of the nature of the alert you want to display, you have the choice between:
Natures.SUCCESS
Natures.WARNING
Natures.FAILURE
Natures.INFO
Basic example
var React = require('react');
var Alert = require('react-material-alert').Alert;
var Natures = require('react-material-alert').Natures;
var sayTheyHitClose = function() {
console.log('they hit the close button captain!');
};
var App = React.createClass({
render: function() {
return <div>
<Alert
alert= {{
nature: Natures.SUCCESS,
content: "it is a <strong>success</strong>!"
}}
id={"alert_1"}
closeCallback={sayTheyHitClose} />
</div>;
}
});
React.render(<App />,
document.getElementById('app'));
Browsers
react-material-alert uses flexbox
Changelog
- Cursor now is pointer when hovering over close button
- Click on close button callback added through props