React-chip-input NPM

react-chip-input

Chip input for react, based on react-bootstrap

GIF Example

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 * 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)}
      />
    );
  }
}

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