React-Select Async Dropdown using Search API
Today we’ll show you how to implement react-select async dropdown using search API. In this article, we will integrate the API to get the list of the options based on the given user input and show list in the react-select dropdown.
As per the request of our readers, we decided to provide the solution to their query for implementation of the async component of the react-select npm package.
Steps to implement react-select async component
- Create a react application
- Implement the react-select dropdown
- Add async component with API integration
- Output
1. Create a react application
Let’s create a react application using create-react-app. Please check out this link for more information.
Run the following command to set up a react application.
1 | npx create-react-app react-select-async-component |
2. Implement the react-select dropdown
Now we have to implement the dropdown using the react-select npm package.
Please refer to the link below for a step by step explanation.
Implement dropdown in ReactJS using react-select
3. Add async component with API integration
- Import the async select dropdown from
react-select/async. - Create a function
loadOptionsto fetch the list by passing the input value where we will integrate the API using thefetchmethod. - Let’s have two different state variables and change methods to handle the input value and selected value.
- Render the async component and display the values over the page.
- Here we have used the
getOptionLabelandgetOptionValueto manage the attribute name for label and value in dropdown.
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | import React, { useState } from 'react'; import AsyncSelect from 'react-select/async'; function App() { const [inputValue, setValue] = useState(''); const [selectedValue, setSelectedValue] = useState(null); // handle input change event const handleInputChange = value => { setValue(value); }; // handle selection const handleChange = value => { setSelectedValue(value); } // load options using API call const loadOptions = (inputValue) => { return fetch(`http://jsonplaceholder.typicode.com/posts?userId=${inputValue}`).then(res => res.json()); }; return ( <div className="App"> <h3>React-Select Async Dropdown - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3> <pre>Input Value: "{inputValue}"</pre> <AsyncSelect cacheOptions defaultOptions value={selectedValue} getOptionLabel={e => e.title} getOptionValue={e => e.id} loadOptions={loadOptions} onInputChange={handleInputChange} onChange={handleChange} /> <pre>Selected Value: {JSON.stringify(selectedValue || {}, null, 2)}</pre> </div> ); } export default App; |
Note: For the demo purpose, I am using the jsonplaceholder API and searching the list by userId but you can implement the API which provides the facility to search by name.
4. Output
Run the application and check out the output in the browser.
That’s it for today.
Thank you for reading. Happy Coding..!!
Fantastic thanks for posting this!
Thank you, Andre!
Please share with your friends and stay tuned for more updates.
It helped a lot. Thanksful
Hey, this is awesome example!
Do you mind if you go a bit further with a similar project that filters and re-renders the API displayed on the table based on the options react-select component has? Thanks!
Hi Joey, glad that helped. We will work on your suggestion. Thank you!