A controlled React input for arrays of data.

Chip

A chip is a component used to represent an arbitrary data object.

Getting Started

npm install --save react-chips-input

1import React, { Component } from 'react';
2import { Chips, Chip } from 'react-chips-input'
3
4class YourComponent extends Component {
5
6  constructor(props) {
7    super(props);
8    this.state = {
9      chips: []
10    }
11  }
12
13  onChange = chips => {
14    this.setState({ chips });
15  }
16
17  render() {
18    return (
19      <div>
20        <Chips
21          value={this.state.chips}
22          onChange={this.onChange}
23          suggestions={["Your", "Data", "Here"]}
24
25        />
26      </div>
27    );
28  }
29}

Chips

Property	Type	Required	Description
value	Array	✓	An array of data that represents the value of the chips
onChange	Function	✓	A function called when the value of chips changes, passes the chips value as an argument.
placeholder	String		The placeholder to populate the input with

|suggestions|Array||Data to fill the autocomplete list with| |fetchSuggestions|Function|| Delegate expecting to recive autocomplete suggestions (callback or promise)| |fetchSuggestionsThrushold|Number|| Maximum calls to fetchSuggestions per-second | |fromSuggestionsOnly|Boolean||Only allow chips to be added from the suggestions list| |uniqueChips|Boolean||Only allow one chip for each object| |renderChip|Function||For custom chip usage. A function that passes the value of the chip as an argument, must return an element that will be rendered as each chip.| |suggestionsFilter|Function||A function that is passed an autoCompleteData item, and the current input value as arguments. Must return a boolean for if the item should be shown.| |getChipValue|Function||A function used to change the value that is passed into each chip.| |createChipKeys|Array||An array of keys/keyCodes that will create a chip with the current input value when pressed. (Will not work of fromSuggestionsOnly is true).| |getSuggestionValue|Function||The value to show in the input when a suggestion is selected| |renderSuggestion|Function||For custom autocomplete list item usage. A function that passes the value as an argument, must return an element to render for each list item.| |shouldRenderSuggestions|Function||See AutoSuggest| |alwaysRenderSuggestions|Boolean||See AutoSuggest| |highlightFirstSuggestion|Boolean||See AutoSuggest| |focusInputOnSuggestionClick|Boolean||See AutoSuggest| |multiSection|Boolean||See AutoSuggest| |renderSectionTitle|Function|✓ when multiSection={true}|See AutoSuggest| |getSectionSuggestions|Function|✓ when multiSection={true}|See AutoSuggest|

Styles

This project uses react-themeable and Radium for styling. The Chips, and default Chip components both accept a theme prop. The theme structure, and default theme can be found here

Custom Chip Component

You may use a custom chip component, simply return the custom component to the renderChip prop function. This component will receive the following additional props from the Chips component.

1<Chips
2  ...
3  renderChip={value => <CustomChip>{value}</CustomChip>}
4/>

Property	Type	Description
selected	bool	A boolean that tells the chip if it is currently selected.
onRemove	func	A function to be invoked when the chip should be removed

Async Suggestions

To fetch asynchronous suggestions use fetchSuggestions.

1<Chips
2  ...
3  fetchSuggestions={(value, callback) => {
4    someAsynCall(callback)
5  }}
6/>
7
8// or with a Promise
9
10<Chips
11  ...
12  fetchSuggestions={(value) => someAsyncCallThatReturnsPromise}
13/>