custom-dropdown-react-bl

custom-dropdown-react-bl

A customizable, accessible, and lightweight dropdown component for React.

✨ Features

• 🧩 Custom label, placeholder, and selected value
• 🎯 Keyboard accessible
• 🎨 Clean and minimal default styling
• ⚡ Lightweight and React 16+ compatible
• ♿️ 100% Accessibility (Lighthouse validated)

🚀 Installation

npm install custom-dropdown-react-bl

## import and usage

import CustomDropdown from 'custom-dropdown-react-bl';
import 'custom-dropdown-react-bl/dist/CustomDropdown.css'; // Required styles

const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
];

function Example() {
  const [selected, setSelected] = useState(null);

  return (
    <CustomDropdown
      label="Fruits"
      value={selected}
      onChange={setSelected}
      options={options}
      placeholder="Select a fruit"
    />
  );
}

## Props

| Prop          | Type                              | Required | Description                        |
| ------------- | --------------------------------- | -------- | ---------------------------------- |
| `label`       | `string`                          | No       | Optional label above the dropdown  |
| `value`       | `any`                             | No       | Currently selected value           |
| `onChange`    | `(value: any) => void`            | Yes      | Callback triggered on value change |
| `options`     | `{ label: string, value: any }[]` | Yes      | List of dropdown options           |
| `placeholder` | `string`                          | No       | Placeholder when no value selected |

#Accessibility

This component follows accessibility best practices:

    Keyboard navigation (up/down/enter/escape)

    Focus trap on open

    Contrast-optimized placeholder text

    Semantic HTML structure

    Supports screen readers

    Passes Lighthouse Accessibility audits (100%)

#Example with Form

const departments = [
  { label: 'Sales', value: 'sales' },
  { label: 'Engineering', value: 'engineering' },
];

<CustomDropdown
  label="Department"
  value={selectedDept}
  onChange={setSelectedDept}
  options={departments}
  placeholder="Select a department"
/>

#links

🔗 Links

    📦 View on npm :https://www.npmjs.com/package/custom-dropdown-react-bl

    💻 Compatible with React 16, 17, 18, 19+