The Dropdown component is a versatile and customizable React component that provides a user-friendly dropdown menu for selecting options.
- Fully customizable appearance and styling.
- Dropdown can be themed using predefined color schemes.
- Option to specify the width of the dropdown container.
- Click outside the dropdown to close it.
- Smooth animation for opening and closing the dropdown.
To use the Dropdown component in your React project, follow these steps:
- Install the package using npm:
npm install dk-custom-dropdown
placeholder
: A string that is displayed when no option is selected.options
: An array of objects representing the available options in the dropdown. Each object should have alabel
(string) and avalue
(string or number).selected
: An object representing the currently selected option. Should have alabel
and avalue
.setSelected
: A function to update the selected option when an option is clicked.width
(optional): The width of the dropdown container in pixels.theme
(optional): The theme of the dropdown, can be'primary'
(default) or a custom class name.
You can customize the appearance of the Dropdown component by applying your own styles. Refer to the provided CSS file for available CSS classes and variables.
The Dropdown component supports the following predefined color themes:
primary
secondary
success
danger
warning
info
light
dark
Apply a theme by setting the theme
prop to the desired theme name.
import React, { useState } from 'react';
import Dropdown from 'dk-custom-dropdown';
const App = () => {
const options = [
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
// Add more options here
];
const [selectedOption, setSelectedOption] = useState({});
const handleOptionChange = (newOption) => {
setSelectedOption(newOption);
};
return (
<div>
<h1>Your App</h1>
<Dropdown
placeholder="Select an option"
options={options}
selected={selectedOption}
setSelected={handleOptionChange}
width={200} // Optional: Set the width of the dropdown
theme="primary" // Optional: Set a color theme for the dropdown
/>
</div>
);
};
export default App;