I am explaining you, how to use react-select in ReactJS.
in any web project, select/dropdown element is widely used html element. if you want to use select element in ReactJS you need to install first “react-select” package. below I mentioning you package install command through npm.
npm i --save react-select
OR
npm i react-select
After installed this package on our local project, you need to use it and build a simple select-box where we can use select a single element.
Example 1: Single select
import Select from 'react-select'
import "./index.css"
import $ from 'jquery';
function App() {
const city_names = [
{ value: 'Burhanpur', label: 'Burhanpur' },
{ value: 'Khandwa', label: 'Khandwa' },
{ value: 'Indore', label: 'Indore' },
{ value: 'Bhopal', label: 'Bhopal' },
];
return (
<><h4>How to use react-select in React</h4>
<h4>Example 1 Single select</h4>
<div className="row"><div className="col-md-4"><Select options={city_names} /></div></div></>
);
}
export default App;
Output :
if you want to select multiple value in dropdown so you need to use multi option in select.
Example 2: Multi select
import Select from 'react-select'
import "./index.css"
import $ from 'jquery';
function App() {
const city_names = [
{ value: 'Burhanpur', label: 'Burhanpur' },
{ value: 'Khandwa', label: 'Khandwa' },
{ value: 'Indore', label: 'Indore' },
{ value: 'Bhopal', label: 'Bhopal' },
];
return (
<><h4>How to use react-select in React</h4>
<h4>Example 1 Single select</h4>
<div className="row"><div className="col-md-4"><Select options={city_names} /></div></div>
<h4>Example 2 Multi select</h4>
<div className="row"><div className="col-md-4"><Select options={city_names} isMulti /></div></div></>
);
}
export default App;
Output :
Hello, Welcome to webdeveloperindia.in. I am a full-stack web developer. Email – [email protected] | Skype – azaruddin23. I have knowledge of PHP, Laravel, Magento 1/2, Codeigniter, WordPress, Joomla, Shopify, Git, Bitbuket, jQuery, Ajax, Javascript and ReactJS.