DEV Community

Aya Bouchiha
Aya Bouchiha

Posted on • Updated 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)

Read next

ellis22 profile image

Spec Coder: The Ultimate VS Code Extension for Smarter, Faster Coding

Ellis -

jahudka profile image

Typescript Dependency Injection

Daniel Kadera -

gameon_gameover_8f18dbb85 profile image

Top 45+ Active directory interview questions and answers for experienced

gameon gameover -

ngoantr profile image

opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error’ ]

Ann -