Dropdown

A custom dropdown made by Ukasyah Rahmatullah Zada

Installation

To use this package run the following command:

npm install @meonode/dropdown

Usage

import Dropdown, { type DropdownOption } from '@meonode/dropdown';

import { useState } from 'react';

function App() {
    const [selected, setSelected] = useState<DropdownOption[]>([]);

    const dropdownOptions: DropdownOption[] = [
        {
            label: 'Option 1',
            value: 'option-1',
        },
        {
            label: 'Option 2',
            value: 'option-2',
        },
        {
            label: 'Long Long Option 3',
            value: 'long-long-option-3',
        },
        {
            label: 'Long Long Long Option 4',
            value: 'long-long-long-option-4',
        },
        {
            label: 'Long Long Long Long Option 5',
            value: 'long-long-long-long-option-5',
        },
        {
            label: 'Long Long Long Long Long Option 6',
            value: 'long-long-long-long-long-option-6',
        },
        // {
        //   label: 'Special Character Test .*+?^${}()|[]\\',
        //   value: 'special-character-test-.*+?^${}()|[]\\',
        // },
    ];

    return (
        <div className={'min-h-dvh min-w-dvw p-4'}>
            <Dropdown
                label={'Label'}
                options={dropdownOptions}
                value={selected}
                onChange={(value) => setSelected(value)}
                usePortal
                multiple
                allowSearch
                outlined
            />
        </div>
    );
}

export default App;

Trying from source

If you want to try this from this source, clone this package first:

git clone [email protected]:l7aromeo/custom-dropdown.git && cd custom-dropdown && bun install

Note this project uses Bun, ensure you have bun Installed

Run this project:

bun dev

or using storybook

bun storybook

Try online storybook

You can also try the online storybook at Custom Dropdown