1.0.3 • Published 8 years ago
react-mdchips v1.0.3
Material Design Input Chips - ReactJs
##Getting Started
npm install react-mdchips
##Usage
In your html file, make sure to include the materializeCss file Also please add this css file, which you can customize to your taste. Note: Add the css file below the materializeCss file.
import MdInputChips from "react-mdchips";
<MdInputChips
placeholder="React Tags"
containerClassName="outer-tags-div"
chips=["xx", "cv"]
inputClassName="tags-input"
max="10"
onBlur={this.onBlurEvt.bind(this)}
onEnter={this.onEnterEvt.bind(this)}
/>
Props | Descrition |
---|---|
placeholder | Default input text you want to display to the user. (optional) |
chips | You can use this to display a default array of chips e.g "xx", "cv". (optional) |
containerClassName | Custom classname to style the outer layer of the whole chips. (optional) |
inputClassName | You can add your custom class name to style the input text box. (optional) |
max | Integer - Max Number of chips you want to allow. (optional, default: 20) |
onBlur | function - Accept function that returns array of chips on blur event |
onEnter | function - Accept function that returns array of chips on enter keypress or tab event |