A react component to show growl-like notifications using bootstrap alerts.

See a live example.

npm install react-bs-notifier --save

import React from "react";
import ReactDOM from "react-dom";
import Notifier from "react-bs-notifier";

var alerts = [{
	type: "info",
	id: "info123",
	message: "This is an information message."
}, {
	type: "warning",
	id: "warning456",
	message: "This is a warning message!"
}, {
	type: "danger",
	headline: "Whoa!",
	message: "This is a danger message!"
}, {
	type: "success",
	headline: "Good job!",
	message: "This is a success message!"
}, {
	type: "success",
	headline: "Good job!",
	message: <span style={{color: 'pink'}}>This is a ping message for some reason!</span>
}];

ReactDOM.render(<Notifier alerts={alerts} timeout={3000} />, document.getElementById("myApp"));

These are the alerts that the component should render. It expects an object with properties type & message with an optional id & headline. id isn't required but strongly encouraged as it will fix some janky issues with how the alerts animate in & out. If no id is specified, the component will fall back to using the array index of the alert as the component key.

The supported values for type are one of info, warning, danger, or success.

An optional timeout (in milliseconds) before alerts are automatically dismissed. If not specified, an alert will not be dismissed until the user dismisses it. There is no timeout by default.

You can pass an onDismiss callback to the component to override what happens when an item is dismissed. By default, if no onDismiss function is specified, the component will manage what alerts are dismissed as part of its internal state.

React.render(<Notifier alerts={alerts} onDismiss={myDismissFunc} timeout={1500} />, document.getElementById("myApp"));

function myDismissFunc(item) {
	console.log(item);
}

Instead of dismissing the notification, the component will call the myDismissFunc. This is a useful way to call an action to integrate this component into a redux application.

If you clone this repo, you can run the example app locally:

npm install
npm start

This will spin up a webpack dev server on port 1341. Open your browser to localhost:1341 and any changes you make will build & refresh the page automatically.

Run npm run build --production and commit the resulting example/index.html & example/build.js.* files to the gh-pages branch.