token input react component
npm install react-input-tokenjavascript
import React, { Component } from "react";
import InputToken from "react-input-token";
import "react-input-token/lib/style.css";class App extends Component {
state = {
tokens: [],
isLoading: false,
};
selectToken = ({ target: { value: tokens } }) => {
this.setState({ tokens })
};
render() {
return (
isLoading={this.state.isLoading}
value={this.state.tokens}
options={[
{ id: 1, name: 'option 1', element: option 1 },
{ id: 2, name: 'option 2', element: option 2 },
{ id: 3, name: 'option 3', element: option 3 },
{ id: 4, name: 'option 4', element: option 4 },
{ id: 5, name: 'option 5', element: option 5 },
{ id: 6, name: 'option 6', element: option 6 },
{ id: 7, name: 'option 7', element: option 7 },
{ id: 8, name: 'option 8', element: option 8 },
{ id: 9, name: 'option 9', element: option 9 },
{ id: 10, name: 'option 10', element: option 10 },
{ id: 11, name: 'option 11', element: option 11 },
]}
onSelect={this.selectToken}/>
);
}
}export default App;
`Props
// inputs' disabled prop
disabled: {boolean},// inputs' id
id: {string},
// Whether options are being loaded
isLoading: {boolean},
// custom loader element
loaderElement: {element},
// Maximum options to select
maxLength: {number},
// Input name (is required)
name: {string},
// Handle select option event, cannot be uncontrolled (is required)
onSelect: {function},
options: array of {
id: {string|number} (is required),
name: {string} (is required),
// custom element for option display
element: {element},
} (is required)
// input placeholder
placeholder: {string},
// selected options array (is required)
value: {value},