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