react-chip-input

Chip input for react, based on react-bootstrap

Pre-requisitions

It is assumed that you have react-bootstrap installed.

Install

npm i react-chip-input
# or
yarn add react-chip-input

Usage

import*asReactfrom"react";importReactChipInputfrom"react-chip-input";classExampleextendsReact.Component{state={chips: []};addChip=value=>{constchips=this.state.chips.slice();chips.push(value);this.setState({ chips });};removeChip=index=>{constchips=this.state.chips.slice();chips.splice(index,1);this.setState({ chips });};render(){return(<ReactChipInputclasses="class1 class2"chips={this.state.chips}onSubmit={value=>this.addChip(value)}onRemove={index=>this.removeChip(index)}/>);}}

Style Variables

/* Chip background color, fallbacks to #eaeaea */--react-chip-input__chip-bg-color/* Chip border color, fallbacks to bootstrap's var --gray to rgba(0, 0, 0, 0.25) */--react-chip-input__chip-border-color/* Chip :hover, :active, :focus background color, fallbacks to #dedede */--react-chip-input__chip-hover-bg-color/* Chip :hover, :active, :focus border color, fallbacks bootstrap's var --dark to rgba(0, 0, 0, 0.05) */--react-chip-input__chip-hover-border-color/* Box shadow color, when active, fallbacks to bootstrap's var --primary to blue */--react-chip-input__box-shadow-color

License

MIT © shhdharmen