A simple React TypeScript dropdown-select component
npm install @droid-tech/react-ts-dropdown-selectDropdownSelect 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.
- 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
To use the DropdownSelect component in your React application, install it via npm:
``sh`
npm install @droid-tech/react-ts-dropdown-select
To use the DropdownSelect component, import it and provide the required props:
`tsx
import DropdownSelect from "@droid-tech/react-ts-dropdown-select";
const MyComponent = () => {
const [selectedValue, setSelectedValue] = useState
const handleChange = (value: string | number) => {
setSelectedValue(value);
};
return (
options={[
{ value: "option1", label: "Option 1" },
{ value: "option2", label: "Option 2" },
{ value: "option3", label: "Option 3" },
]}
value={selectedValue}
onChange={handleChange}
/>
);
};
`
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 |
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.
The DropdownSelect component is designed with accessibility in mind. The dropdown is keyboard-accessible, allowing users to navigate and select options using the keyboard.
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.