Building An Awesome Select Box Using “react-select” library

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 reac…


This content originally appeared on DEV Community and was authored by Aya Bouchiha

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;

Have an amazing day!


This content originally appeared on DEV Community and was authored by Aya Bouchiha


Print Share Comment Cite Upload Translate Updates
APA

Aya Bouchiha | Sciencx (2021-09-04T21:49:27+00:00) Building An Awesome Select Box Using “react-select” library. Retrieved from https://www.scien.cx/2021/09/04/building-an-awesome-select-box-using-react-select-library/

MLA
" » Building An Awesome Select Box Using “react-select” library." Aya Bouchiha | Sciencx - Saturday September 4, 2021, https://www.scien.cx/2021/09/04/building-an-awesome-select-box-using-react-select-library/
HARVARD
Aya Bouchiha | Sciencx Saturday September 4, 2021 » Building An Awesome Select Box Using “react-select” library., viewed ,<https://www.scien.cx/2021/09/04/building-an-awesome-select-box-using-react-select-library/>
VANCOUVER
Aya Bouchiha | Sciencx - » Building An Awesome Select Box Using “react-select” library. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/04/building-an-awesome-select-box-using-react-select-library/
CHICAGO
" » Building An Awesome Select Box Using “react-select” library." Aya Bouchiha | Sciencx - Accessed . https://www.scien.cx/2021/09/04/building-an-awesome-select-box-using-react-select-library/
IEEE
" » Building An Awesome Select Box Using “react-select” library." Aya Bouchiha | Sciencx [Online]. Available: https://www.scien.cx/2021/09/04/building-an-awesome-select-box-using-react-select-library/. [Accessed: ]
rf:citation
» Building An Awesome Select Box Using “react-select” library | Aya Bouchiha | Sciencx | https://www.scien.cx/2021/09/04/building-an-awesome-select-box-using-react-select-library/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts