https://github.com/acrool/acrool-react-dropdown

Drop-down menu with rich functions, including search/groups options/avatar/multi for Reactjs
https://github.com/acrool/acrool-react-dropdown

dropdown react select select-avatar select2 typescript vite4

Last synced: about 1 year ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/acrool/acrool-react-dropdown
• Owner: acrool
• License: mit
• Created: 2022-08-04T08:34:26.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-29T14:40:29.000Z (over 1 year ago)
• Last Synced: 2025-04-02T04:34:36.747Z (about 1 year ago)
• Topics: dropdown, react, select, select-avatar, select2, typescript, vite4
• Language: TypeScript
• Homepage: https://acrool-react-dropdown.pages.dev/
• Size: 4.95 MB
• Stars: 8
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.md

Awesome Lists containing this project

• awesome-react - Acrool React Dropdown - Dropdown (React component)

README

          
# Acrool React Dropdown



    





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





[![NPM](https://img.shields.io/npm/v/@acrool/react-dropdown.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-dropdown)

[![npm](https://img.shields.io/bundlejs/size/@acrool/react-dropdown?style=for-the-badge)](https://github.com/acrool/@acrool/react-dropdown/blob/main/LICENSE)

[![npm](https://img.shields.io/npm/l/@acrool/react-dropdown?style=for-the-badge)](https://github.com/acrool/react-dropdown/blob/main/LICENSE)

[![npm downloads](https://img.shields.io/npm/dm/@acrool/react-dropdown.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-dropdown)

[![npm](https://img.shields.io/npm/dt/@acrool/react-dropdown.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-dropdown)



## 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

```bash

yarn add @acrool/react-dropdown

```

## Usage

add in your index.tsx

```tst

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

```

then in your page

```tsx

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

const Example = () => {

    const [value, setValue] = useState('');

    const [multiValue, setMultiValue] = useState|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 ;

    }

    

    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 ;

    }

    

    return (

        <>

            {renderDropdown()}

            {renderDropdownMulti()}

        >

    );

};

```



## Options

if need use `null` value, options type

```json

{

    "compilerOptions": {

        "strictNullChecks": false

    }

}

```

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

[![Play react-editext-example](https://raw.githubusercontent.com/acrool/acrool-react-dropdown/main/play-in-example-button.svg)](https://acrool-react-dropdown.pages.dev)

## License

MIT © [Acrool](https://github.com/acrool) & [Imagine](https://github.com/imagine10255)