react-dropdown-tailwind v1.0.1

React Tailwind Dropdown

Quick Links

• 📚 Documentation & Demo: Storybook
• 💻 Repository: GitHub
• 🚀 NPM Package: npm

A highly customizable React dropdown component built with Tailwind CSS. Features include single/multiple selection, search functionality, portal rendering, and custom styling options.

Installation

npm install react-dropdown-tailwind
# or
yarn add react-dropdown-tailwind

Make sure you have the peer dependencies installed:

• React >= 18.0.0
• React DOM >= 18.0.0
• Tailwind CSS >= 3.0.0

Usage

import Dropdown from "react-dropdown-tailwind";

const options = [
  { value: "1", label: "Option 1" },
  { value: "2", label: "Option 2" },
  { value: "3", label: "Option 3" },
];

function MyComponent() {
  const [value, setValue] = useState("");

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

Features

• Single and multiple selection modes
• Search functionality
• Portal rendering support
• Custom styling with Tailwind CSS
• Error state handling
• Required field validation
• Disabled state
• Custom option rendering
• Keyboard navigation
• Accessible by default

Props

Examples

Multiple Selection

<Dropdown
  multiple
  options={options}
  value={["1", "2"]}
  onChange={setSelectedValues}
  placeholder="Select multiple options..."
/>

With Search

<Dropdown
  withSearch
  options={options}
  value={value}
  onChange={setValue}
  placeholder="Search and select..."
/>

Custom Styling

<Dropdown
  className="min-w-[300px]"
  options={options}
  value={value}
  onChange={setValue}
  label="Custom Styled Dropdown"
/>

Custom Option Rendering

<Dropdown
  options={options}
  value={value}
  onChange={setValue}
  renderOption={(option, isSelected, onSelect) => (
    <div
      key={option.value}
      className={`
        px-3 py-2 cursor-pointer flex items-center gap-2
        ${isSelected ? "bg-blue-50 text-blue-700" : "hover:bg-gray-50"}
      `}
      onClick={onSelect}
    >
      <div
        className={`w-2 h-2 rounded-full ${
          isSelected ? "bg-blue-500" : "bg-gray-300"
        }`}
      />
      <span>{option.label}</span>
    </div>
  )}
/>

Development

# Install dependencies
npm install

# Run Storybook for development
npm run storybook

# Build the package
npm run build

# Build Storybook
npm run build-storybook

License

MIT © Joko Santoso