React-material-alert NPM

dependencies-image-url

README

react-material-alert is a lightweight library for displaying UI alerts in the google material design way.

Demo

Demo source

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'));