DropdownSelect

DropdownSelect is a customizable React dropdown select component built with TypeScript and styled-components. It provides a clean and modern UI for selecting options from a list.

Features

• Customizable label and options
• Supports any string or number as option values
• Displays currently selected value
• Dropdown opens on click
• Scrollable dropdown options
• Customizable icon
• Styled using styled-components for easy theming
• TypeScript support for type safety

Installation

To use the DropdownSelect component in your React application, install it via npm:

npm install @droid-tech/react-ts-dropdown-select

Usage

To use the DropdownSelect component, import it and provide the required props:

import DropdownSelect from "@droid-tech/react-ts-dropdown-select";

const MyComponent = () => {
  const [selectedValue, setSelectedValue] = useState<string | number>("");

  const handleChange = (value: string | number) => {
    setSelectedValue(value);
  };

  return (
    <DropdownSelect
      label="Select an option"
      options={[
        { value: "option1", label: "Option 1" },
        { value: "option2", label: "Option 2" },
        { value: "option3", label: "Option 3" },
      ]}
      value={selectedValue}
      onChange={handleChange}
    />
  );
};

Props

The DropdownSelect component accepts the following props:

| Prop | Type | Required | Description | |------------|-------------------------------------------|----------|---------------------------------------------------| | label | string | Yes | The label to display for the dropdown | | options | { value: string | number; label: string }[] | Yes | An array of options to display in the dropdown | | value | string | number | No | The currently selected value | | onChange | (value: string | number) => void | Yes | Function to call when an option is selected | | icon | React.ReactNode | No | The icon to display in the dropdown header |

Customization

The DropdownSelect component uses styled-components, which allows for easy customization and theming. You can override the default styles by wrapping the DropdownSelect component with a styled-components theme provider or by creating new styled components based on the existing ones.

Accessibility

The DropdownSelect component is designed with accessibility in mind. The dropdown is keyboard-accessible, allowing users to navigate and select options using the keyboard.

Conclusion

The DropdownSelect component provides a simple and customizable way to add dropdown select functionality to your React application. With its TypeScript support and styled-components integration, it can easily be styled to match your design requirements while maintaining type safety.