How to add searchable select box dropdown in React Js
Most of the developers who work on react js library find it difficult which working on searchable select box dropdown and multiple selections. In this post, I’ll introduce you to a react js package that I personally use in my react and next js projects.
The package is react-dropdown-select which is a great package if you working with a select box and multiple options selections.
Installation of react-dropdown-select
Use the below command to install
npm install react-dropdown-select
Importing Select Component
You can import it into your component using import Select from "react-dropdown-select".
Example
Here is a simple select box component.
In App.js
import Select from 'react-dropdown-select'
import React,{ useState, useEffect } from 'react';
function App() {
const [options, setOptions] = useState( [
{ id: 1, country: "America" },
{ id: 2, country: "India" },
{ id: 3, country: "Africa" },
] )
const [selectedOptions, setSelectedOptions] = useState( [ ] )
return (
<>
<div style={{width:'250px', margin:'15px'}} >
<Select options={ options.map( ( item, index ) => {
return { value: item.id, label: item.country }
} ) } values={selectedOptions} onChange={ ( values ) => setSelectedOptions([...values]) } />
</div>
</>
);
}
export default App;
Props
- options: This is a list of items in select box
- values: This prop takes selected values and they must be returned as an object with value and label key.
- onChange Event: A callback function that contains all the selected values. You can use this to set values state.
- multi: Takes boolean values can select multiple options.
Output
react js searchable select box using react-dropdown-select library
react js searchable select box with multiple values to select using the react-dropdown-select library
Conclusion
We have reached the end of this tutorial, also here is the link to the GitHub repository, and here is a link to the documentation page of react-dropdown-select.
