A controlled React input for arrays of data.
Chip
A chip is a component used to represent an arbitrary data object.
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>
);
}
}| 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 | |
theme |
Object | A react-themeable theme | |
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 |
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
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>}
/>| 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 |
To fetch asynchronous suggestions use fetchSuggestions.
<Chips
...
fetchSuggestions={(value, callback) => {
someAsynCall(callback)
}}
/>
// or with a Promise
<Chips
...
fetchSuggestions={(value) => someAsyncCallThatReturnsPromise}
/>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent