0.1.0 • Published 4 years ago
react-chips-input v0.1.0
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
import React, { Component } from 'react';
import { Chips, Chip } from 'react-chips-input'
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
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 | --> | |
<!-- | chipTheme | Object | A react-themeable theme that will override the default chip 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 |
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>}
/>
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
.
<Chips
...
fetchSuggestions={(value, callback) => {
someAsynCall(callback)
}}
/>
// or with a Promise
<Chips
...
fetchSuggestions={(value) => someAsyncCallThatReturnsPromise}
/>
0.1.0
4 years ago