React-Crouton
A message component for reactjs
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
License
MIT