Makyo Dropdown Component

A highly customizable, production-ready React dropdown component built with Tailwind CSS and Floating UI.

Features

• Search Filtering: Client-side filtering with localized search.
• Portals: React Portals integration for z-index management.
• Selection Modes: Single and multi-select support.
• Custom Rendering: Render props pattern for option customization.
• Accessibility: Full keyboard navigation support.
• Styling: Tailwind CSS architecture.
• Zero-Bloat: Built on Floating UI.

Installation

npm install @makyo/dropdown
# or
yarn add @makyo/dropdown

Basic Usage

import { useState } from 'react';
import { Dropdown } from '@makyo/dropdown';
import '@makyo/dropdown/dist/style.css';

function App() {
  const [value, setValue] = useState(null);
  
  const options = [
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' },
  ];

  return (
    <Dropdown
      options={options}
      value={value}
      onChange={setValue}
      placeholder="Select an option"
    />
  );
}

Advanced Usage

Multi-select with Search

<Dropdown
  options={options}
  value={selectedValues}
  onChange={setSelectedValues}
  multiple
  searchable
  placeholder="Select multiple items"
/>

Custom Option Rendering

<Dropdown
  options={options_with_icons}
  customOptionRender={(option) => (
    <div className="flex items-center gap-2">
      <img src={option.avatar} className="w-6 h-6 rounded-full" />
      <div>
        <p className="font-bold">{option.label}</p>
        <p className="text-xs text-gray-500">{option.email}</p>
      </div>
    </div>
  )}
  // ...
/>

Props

Prop	Type	Default	Description
options	Array	[]	Array of options { value, label, ... }
value	any	null	Current selected value(s)
onChange	func	-	Callback when selection changes
multiple	boolean	false	Enable multi-select mode
searchable	boolean	false	Enable search input
portal	boolean	false	Render menu in a portal
placeholder	string	"Select..."	Placeholder text
disabled	boolean	false	Disable the dropdown
customOptionRender	func	null	Render function for options
className	string	""	Class for trigger button
menuClassName	string	""	Class for menu container

Development

To run the project locally with Storybook:

# Install dependencies
npm install

# Start Storybook
npm run storybook

Building

To build the library for distribution:

npm run build

License

MIT