Material Design Input Chips - ReactJs

DEMO

##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)}
  onDelete={this.onDeleteEvt.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