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