JSPM – custom-button-design@2.0.1

Package Exports

custom-button-design
custom-button-design/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (custom-button-design) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

#React label/tag list component

Demo

Screencast

Dependencies

React Less

Installation

$ npm install custom-button-design

Usage

import React from 'react';
import LabelList from 'custom-button-design/lib/label-list.js'

const MyAwesomeReactComponent = () => (
  <LabelList />
);

export default MyAwesomeReactComponent;

Customization

Property	Type	Description
`color`	String	font color of the label
`background`	String	background color of the label
`listUpdated`	Function	called any time there is an update of the label/tag list
`placeholder`	String	initial input text
`background`	Function	called any time user clicks on the label name

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