Home

Awesome

React Chips npm package Build Status

A controlled React input for arrays of data. Example

Chip

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

Getting Started

npm install --save react-chips
import React, { Component } from 'react';
import Chips, { Chip } from '../src'

class YourComponent extends Component {

  constructor(props) {
    super(props);
    this.state = {
      chips: []
    }
  }

  onChange = chips => {
    this.setState({ chips });
  }

  render() {
    return (
      <div>
        <Chips
          value={this.state.chips}
          onChange={this.onChange}
          suggestions={["Your", "Data", "Here"]}

        />
      </div>
    );
  }
}

Chips

PropertyTypeRequiredDescription
valueArrayAn array of data that represents the value of the chips
onChangeFunctionA function called when the value of chips changes, passes the chips value as an argument.
placeholderStringThe placeholder to populate the input with
themeObjectA react-themeable theme
chipThemeObjectA react-themeable theme that will override the default chip theme,
suggestionsArrayData to fill the autocomplete list with
fetchSuggestionsFunctionDelegate expecting to recive autocomplete suggestions (callback or promise)
fetchSuggestionsThrusholdNumberMaximum calls to fetchSuggestions per-second
fromSuggestionsOnlyBooleanOnly allow chips to be added from the suggestions list
uniqueChipsBooleanOnly allow one chip for each object
renderChipFunctionFor 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.
suggestionsFilterFunctionA 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.
getChipValueFunctionA function used to change the value that is passed into each chip.
createChipKeysArrayAn array of keys/keyCodes that will create a chip with the current input value when pressed. (Will not work of fromSuggestionsOnly is true).
getSuggestionValueFunctionThe value to show in the input when a suggestion is selected
renderSuggestionFunctionFor custom autocomplete list item usage. A function that passes the value as an argument, must return an element to render for each list item.
shouldRenderSuggestionsFunctionSee AutoSuggest
alwaysRenderSuggestionsBooleanSee AutoSuggest
highlightFirstSuggestionBooleanSee AutoSuggest
focusInputOnSuggestionClickBooleanSee AutoSuggest
multiSectionBooleanSee AutoSuggest
renderSectionTitleFunction✓ when multiSection={true}See AutoSuggest
getSectionSuggestionsFunction✓ 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.

<Chips
  ...
  renderChip={value => <CustomChip>{value}</CustomChip>}
/>
PropertyTypeDescription
selectedboolA boolean that tells the chip if it is currently selected.
onRemovefuncA function to be invoked when the chip should be removed

Async Suggestions

To fetch asynchronous suggestions use fetchSuggestions.

<Chips
  ...
  fetchSuggestions={(value, callback) => {
    someAsynCall(callback)
  }}
/>

// or with a Promise

<Chips
  ...
  fetchSuggestions={(value) => someAsyncCallThatReturnsPromise}
/>