react-crouton

    1.0.0 • Public • Published

    React-Crouton Build Status

    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

    Install

    npm i react-crouton

    DownloadsWeekly Downloads

    2,379

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • xeodou