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

License

MIT