DEV Community

Aya Bouchiha
Aya Bouchiha

Posted on • Edited on

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
Enter fullscreen mode Exit fullscreen mode 
yarn add react-select
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Have an amazing day!

Top comments (0)