I have read about a simple React library which offers flexibility and easy to use input control for your apps, with features like multi-select, autocomplete, and async.
A flexible and beautiful Select Input control for ReactJS with multi-select, autocomplete, async and creatable support.
Some Features
- Flexible approach to data, with customizable functions
- Extensible styling API with emotion
- Component Injection API for complete control over the UI behavior
- Controllable state props and modular architecture
- Long-requested features like option groups, portal support, animation, and more
Installation
npm install react-select
Usage
import React from 'react';
import Select from 'react-select';
const options = [
{ value: 'blues', label: 'Blues' },
{ value: 'rock', label: 'Rock' },
{ value: 'jazz', label: 'Jazz' },
{ value: 'orchestra' label: 'Orchestra' }
];
class App extends React.Component {
render(){
return (
<Select options = {options} />
);
}
In the above example, import the react-select package in App.js
This gives access to the react-select ( ) and also extends the React.Component class. The options and values are passed in as props.
Props
state = {
selectedOption: null,
}
handleChange = (selectedOption) => {
this.setState({ selectedOption });
console.log(`Option selected:`, selectedOption);
}
render(){
const { selectedOption } = this.state;
}
return (
<S
Here is an example of how some props are used to customize the functionalities of the select component.
The state manager prop onChange gets the information about the current select item. For example, if you select rock as an option in the console, you'll get something like Option selected: {value:"rock", label: "Rock"} which is useful for manipulating the data gotten from our select component. Other props seen are the options and autoFocus props. The options prop is used to pass in select options to the select component, which in this case are the music genres. The autoFocus prop which has a data type of boolean is used to add autoFocus to the select component on page load.
Here is a list of some common props:
- autoFocus - focus the control when it mounts
- className - apply a className to the control
- classNamePrefix - apply classNames to inner elements with the given prefix
- isDisabled - disable the control
- isMulti - allows the user to select multiple values
- isSearchable - allows the user to search for matching options
- name - generate an HTML input with this name, containing the current value
- onChange - subscribe to change events
- options - specify the options the user can select from
- placeholder - change the text displayed when no option is selected
- value - control the current value
Check out the props documentation for more.
There are other features such as async, animated components, and custom components that you can see in the documentation on the official site. It really is a handy tool.
References
Top comments (0)