Skip to main content

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

Note: Special thanks to xeodou

Contact Me - xeodou@gmail.com

Disclaimer: The blog is created to share react components information to geek, curious ReactJS Developers.
Labels:

Comments

  1. Aurthur19 March 2018 at 04:54

    Thanks for sharing this coding, it gives clear explanation about crouton message component.
    React js Training in Chennai | React js Training

    ReplyDelete

Post a Comment

Popular posts from this blog

Rx Visualizer - Animated playground for Rx Observables https://rxviz.com

Description RxViz simply visualizes a given Observable. Your JavaScript code will be evaluated, and, if the last expression is an Observable, a nice animated visualization will appear. You can also: Control the speed of the animation by modifying the Time window input. Copy the resulting SVG to include in your next Rx presentation. Share the visualization with your friends. Examples Basic interval Random error Higher order Observable Pause and resume How does it work? RxViz treats the evaluated Observable as a black box. We rely only on the fact that Observable emits values over time. RxViz doesn't rely on the internals of RxJS. This will allow us to visualize TC39 Observables in the future. Technically, we subscribe to the given Observable, and, once a value is observed, we simply add it to the visualization. It's that simple! How about higher order Observables? No different. Since a higher order Observable is simply an Observable whose values ...
Post a Comment
Read more

React Async

React Async provides a way for React components to subscribe for observable values. Installation React Async is packaged on npm: $ npm install react-async Basic usage React Async provides a component decorator @Async which given a set of observable specifications wraps a regular React component and returns a new one which subscribes to observables and re-renders the component when new data arrives. The basic example looks like: import React from 'react'; import Async from 'react-async'; import Rx from 'rx'; function defineXHRObservable(url) { return { id: url, start() { return Rx.fromPromise(fetch(url)) } } } function MyComponentObservables(props) { return { user: defineXHRObservable(`/api/user?user${props.userID}`) } } @Async(MyComponentObservables) class MyComponent extends React.Component { render() { let {user} = this.props ... } } The @Async decorator in...
Post a Comment
Read more