React-Crouton - A message component for reactjs

Live Demo

Getting Started

Install via npm

 npm i react-crouton --save-dev  

Usage

 var Crouton = require('react-crouton')  
 var data = {  
   id: Date.now(),  
   type: 'error',  
   message: 'Hello React-Crouton',  
   autoMiss: true || false,  
   onDismiss: listener,  
   buttons: [{  
     name: 'close',  
     listener: function() {  
     }  
   }],  
   hidden: false,  
   timeout: 2000  
 }  
 <Crouton  
   id={data.id}  
   type={data.type}  
   message={data.message}  
   onDismiss={data.onDismiss}  
   buttons={data.buttons}  
   hidden={data.hidden}  
   timeout={data.timeout}  
   autoMiss={data.autoMiss}>  
 // You can render child component here  
 // <ChildComponent />  
 </Crouton>  

Options

id required, every message need an unique id.
type: number message required, the message what you want show.
type: string || array example:

 message: 'Hello React-Crouton'  
 message: ['Hello', 'React', '-', 'Crouton']  

type required, define what type message you want to define.
type: string hidden optional, control this property to show or hidden crouton.
type: boolean, default is false buttons optional, define the buttons that you want show to the user.
type: string || array example:

 buttons: 'close'  
 butons: [{  
   name: 'close'  
 }]  
 butons: [{  
   name: 'close',  
   listener: function() {  
     console.log('close button clicked.')  
   }  
 }]  
 butons: [{  
   name: 'close',  
   className: 'custom class name',  
   listener: function() {  
     console.log('close button clicked.')  
   }  
 }]  

autoMiss optional, crouton will auto missed if set this propterty, default is true. type: boolean
timeout optional, set how long (ms) to auto dismiss the crouton. type: number, default is 2000 ms (2 seconds)
onDismiss optional, crouton will invoke this listener when it dismissed.
type: function

Note: Special thanks to xeodou

Contact Me - xeodou@gmail.com

Disclaimer: The blog is created to share react components information to geek, curious ReactJS Developers.