Chip input for react, based on react-bootstrap
It is assumed that you have react-bootstrap installed.
npm i react-chip-input # or yarn add react-chip-inputimport * as React from "react"; import ReactChipInput from "react-chip-input"; class Example extends React.Component { state = { chips: [] }; addChip = value => { const chips = this.state.chips.slice(); chips.push(value); this.setState({ chips }); }; removeChip = index => { const chips = this.state.chips.slice(); chips.splice(index, 1); this.setState({ chips }); }; render() { return ( <ReactChipInput classes="class1 class2" chips={this.state.chips} onSubmit={value => this.addChip(value)} onRemove={index => this.removeChip(index)} /> ); } }/* 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-colorMIT © shhdharmen