https://github.com/xeodou/react-crouton

A message component for reactjs
https://github.com/xeodou/react-crouton

Last synced: 17 days ago
JSON representation

A message component for reactjs

• Host: GitHub
• URL: https://github.com/xeodou/react-crouton
• Owner: xeodou
• License: mit
• Created: 2014-09-17T11:16:24.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2018-01-23T18:48:24.000Z (almost 7 years ago)
• Last Synced: 2024-11-23T22:02:30.445Z (20 days ago)
• Language: JavaScript
• Homepage: https://xeodou.github.io/react-crouton/
• Size: 445 KB
• Stars: 144
• Watchers: 5
• Forks: 15
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-components-all - react-crouton - A message component for reactjs. (Uncategorized / Uncategorized)
• awesome-list - react-crouton - A message component for reactjs. (Demos / Notification)

README

        
# React-Crouton [![Build Status](https://travis-ci.org/xeodou/react-crouton.svg?branch=master)](https://travis-ci.org/xeodou/react-crouton)

> A message component for reactjs

[Live Demo](http://xeodou.github.io/react-crouton)

## Getting Started

Install via [npm](http://npmjs.org/react-crouton)

```shell

   npm i react-crouton --save-dev

```

## Usage

```Javascript

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

}

// You can render child component here

// 

```

## 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