pb-react-mdchips

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