Luxo NPM | npm.io

Luxo

A simple message component for reactjs. Forked from react-crouton.

Getting Started

Install via npm

   npm i luxo --save

Usage

var Luxo = require('luxo')

var data = {
    id: Date.now(),
    type: 'error',
    message: 'Hello Luxo!',
    autoDismiss: true || false,
    onDismiss: listener,
    buttons: [{
        name: 'close',
        listener: function() {
        }
    }],
    hidden: false,
    timeout: 2000
}

<Luxo
    id={data.id}
    type={data.type}
    message={data.message}
    onDismiss={data.onDismiss}
    buttons={data.buttons}
    hidden={data.hidden}
    timeout={data.timeout}
    autoDismiss={data.autoDismiss}/>

Component Options

id required, every message need an unique id. You can use something like Chance to generate random integers if you are so inclined

type: number

message required, the type of message that you'll be sending. You can provide either a single string or array of strings. If you provide multiple strings, each message will get it's own div. This could be useful if you need to provide a series of messages at once but have them display within one notification.

type: string || array

example:

message: 'Hello React-Luxo'
message: ['You did something', 'You did something else!', 'This is fun']

type required, define what type message you want to create. This will be the className that gets set on a message. You could easily set up some nice nested LESS/SCSS styling that would let you create some custom styling for different message types.

type: string

hidden optional, control this property to hide or show a Luxo component.

type: boolean, default is false

autoDismiss optional, Luxo will auto-dismiss if set this proptety; defaults to true.

type: boolean

timeout optional, set how long (ms) to auto-dismiss the Luxo component.

type: number, default is 3000 ms (3 seconds)

onDismiss optional, Luxo will invoke this listener when it dismissed.

type: function