A 'Growl' style notification ReactJS component.

npm install react-growl

Note on Requirements: Many in package.json are listed in order to run the demo. The only requirement to install this into your application is React.

Use npm to install. After installation, from the directory you installed into run:

bower install gulp serve

Will launch a browser with

In your app's main file:

/** @jsx React.Dom */

var React = require("react");

var Growl = require("Growl/growl.react");

var MyApp = React.createClass({
	
	growler: null,

	componentDidMount: function() {

		// Setup your Growl Settings
		Growl.setPosition("tr"); // Bottom-Right(br) by default
		Growl.setMaxToShow(1); // Default is 8

		// set our internal variable to a reference to an instance of the growler
		this.growler = this.refs.growler;
	},

	// Give your whole app a method to call and trigger a notification.
	growl: function(level, msg) {
		this.growler.addNotification(level, msg);
	},

	// Somewhere in your main application view (so that it doesn't get unmounted) add an instance of Growl.
	render: function() {
		return (
			<div className="myApp">
				<Growl ref="growler" />
			</div>
		);
	}

});

module.exports = MyApp;

• setPosition: @arg String inArray: ["tr", "tl", "tc", "br", "bl", "bc"]
  • Sets the position where all notifications will appear. Default: "br"
• setMaxToShow: @arg Integer
  • The number of notifications to show before just showing "x more"
• setDelay: @arg Integer ms
  • The amount of time, in milliseconds, a notification will appear. Be sure to include time needed for any initial animation when the notification is added.
• getDelay: @returns Integer ms
• noAnimation: void
  • If you are not using css animations for the notification show/remove, this will need called after you mount the component. If not called, the notifications will not be removed once the delay expires.

Copyright (c) 2015 Moosylvania Marketing ([email protected])