@acrool/react-dropdown

Acrool React Dropdown

Drop-down menu with rich functions, including search/groups options/avatar/multi for Reactjs

^3.1.0 support react >=18.0.0 <20.0.0

Features

• Supports two themes (light/dark)
• Support multiple selection function
• Support groups options
• Support avatar display
• Support search search function
• Support value custom type (string, number, boolean, object...)
• Support accessibility (keyboard Tab, Arrow Top, Bottom, Enter)

Install

yarn add @acrool/react-dropdown

Usage

add in your index.tsx

import "@acrool/react-dropdown/dist/index.css";

then in your page

import {Dropdown, DropdownMulti} from '@acrool/react-dropdown';


const Example = () => {
    const [value, setValue] = useState<string|null>('');
    const [multiValue, setMultiValue] = useState<Array<string|null>|null>(null);

    const renderDropdown = () => {
        const options = [
            {text: 'Jack Wu', value: '1'},
            {text: 'Imagine Chiu', value: '2'},
            {text: 'Jason Dinwiddie', value: '3'},
            {text: 'Gloria Lu', value: '4'},
        ];
        return <Dropdown value={value} onChange={setValue} options={options}/>;
    }
    
    const renderDropdownMulti = () => {
        const options = [
            {text: 'Select option item...', value: '', avatarUrl: ''},
            {text: 'Jack Wu', value: '1', avatarUrl: asset('/images/avatar/female-1.jpg')},
            {text: 'Imagine Chiu', value: '2', avatarUrl: asset('/images/avatar/female-2.jpg')},
            {text: 'Jason Dinwiddie', value: '3', avatarUrl: asset('/images/avatar/female-3.jpg')},
            {text: 'Gloria Lu', value: '4', avatarUrl: asset('/images/avatar/female-4.jpg')},
        ];
        return <DropdownMulti value={multiValue} onChange={setMultiValue} options={options2} isDark/>;
    }
    
    return (
        <>
            {renderDropdown()}
            {renderDropdownMulti()}
        </>
    );

};

Options

if need use null value, options type

{
    "compilerOptions": {
        "strictNullChecks": false
    }
}

There is also a example that you can play with it:

License

MIT © Acrool & Imagine