Building An Awesome Select Box Using "react-select" library

#react #javascript #typescript #webdev

Hi, I'm Aya Bouchiha, on this awesome day, we'll talk about react-select.

react-select

react-select: is a react library that lets you build easily an awesome select box or drop-down menu.
docs
github

installation

npm i react-select

yarn add react-select

Code

import Select from 'react-select';

const options = [
    { value: 'ar', label: 'arabic' }
    { value: 'en', label: 'english' },
    { value: 'fr', label: 'french' },
]

const SelectBox = () => { 
    return (
        <>
            <Select
                name="name"
                className="basic-single" 
                classNamePrefix="select"
                isDisabled={false}
                isLoading={true}
                isClearable={true}
                isRtl={true}
                isSearchable={true}
                defaultValue={options[0]} // default option
                options={options} // options
            />
        </>
    );
}

export default SelectBox;