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 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.

Summary
Review Date
Reviewed Item
How to add searchable select box dropdown in React Js
Author Rating
51star1star1star1star1star
Software Name
React JS
Software Name
Windows Os, Mac Os, Ubuntu Os
Software Category
Web Development