es6-react-label-list

React label/tag list component

Demo

Dependencies

React Less

Installation

$ npm install es6-react-label-list

Usage

import React from 'react';
import LabelList from 'es6-react-label-list/lib/label-list.js'
 
const MyAwesomeReactComponent = () => (
  <LabelList />
);
 
export default MyAwesomeReactComponent;

Customization

So far there are only these optional parameters for the component customization: color, to set the font color of the label; background , to set the background color of the label; listUpdated, a function is called any time there is an update of the label/tag list; placeholder as the initial input text; and labelClicked, a function is called any time user clicks on the label name.

const printMyList = (list) => {
    console.log(list.join(', '))
}
const printLabel = (label) => {
    console.log(label)
}
const MyAwesomeReactComponent = () => (
  <LabelList color="black" background="green" listUpdated={printMyList} labelClicked={printLabel}/>
);

License

MIT