4

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

 3 years ago
source link: https://dev.to/ayabouchiha/building-an-awesome-select-box-using-react-select-library-3okp
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

Sep 4

・1 min read

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

Have an amazing day!


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK