React TS Dropdown Search Tailwind

A lightweight, customizable, and accessible searchable dropdown component for React, built with TypeScript and Tailwind CSS.

Features

• 🔍 Searchable: Filter options easily with a built-in search input.
• 🎨 Tailwind CSS: Styled with Tailwind CSS for easy customization and integration.
• 📘 TypeScript: Fully typed for excellent developer experience.
• ရှင်း Clearable Selection: Easily clear the selected option.
• 🖱️ Outside Click Handling: Automatically closes the dropdown when clicking outside.
• 📱 Responsive: Adapts to different screen sizes.
• ♿ Accessible: Built with accessibility in mind.

Installation

Install the package via npm:

npm install react-ts-dropdown-search-tailwind

Make sure you have the peer dependencies installed:

npm install react react-dom lucide-react

Usage

Here's a simple example of how to use the component:

import React, { useState } from "react";
import ReactTsDropdownSearchTailwind, {
  DropdownOption,
} from "react-ts-dropdown-search-tailwind";

const App = () => {
  const [selectedOption, setSelectedOption] = useState<DropdownOption | null>(
    null
  );

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

  const handleChange = (option: DropdownOption | null) => {
    console.log("Selected:", option);
    setSelectedOption(option);
  };

  return (
    <div className="p-10">
      <ReactTsDropdownSearchTailwind
        options={options}
        value={selectedOption}
        onChange={handleChange}
        placeholder="Search for an item..."
        headerPlaceholder="Select an item"
      />
    </div>
  );
};

export default App;

Props

| Prop | Type | Default | Description | | ------------------- | ----------------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------- | | options | DropdownOption[] | Required | Array of options to display. Each option must have a value (string) and label (string). | | value | DropdownOption \| null | null | The currently selected option. Use null for no selection. | | onChange | (value: DropdownOption \| null) => void | undefined | Callback function triggered when an option is selected or cleared. | | placeholder | string | "Search..." | Placeholder text for the search input inside the dropdown. | | headerPlaceholder | string | "Search..." | Placeholder text displayed on the dropdown button when no option is selected. | | className | string | "" | Additional CSS classes for the dropdown container. | | error | string | undefined | An error message to display. When provided, the dropdown border will be styled to indicate an error. |

DropdownOption Interface

interface DropdownOption {
  value: string;
  label: string;
}

Requirements

• React >= 16.8.0
• Tailwind CSS (ensure your project is set up with Tailwind)

Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue.

License

MIT © Shamim Hasnain