@baptistej/react-dropdown
React Dropdown Component Library
A simple, customizable and accessible React dropdown component
Links
Installation
npm install --save "@baptistej/react-dropdown";or :
yarn add "@baptistej/react-dropdown";Usage
Import the component and style and use it in your code :
import Dropdown from "@baptistej/react-dropdown";import "@baptistej/react-dropdown/dist/style.css"; const App = () => { return ( <Dropdown /> );} export default App;Dropdown
<Dropdown id="" data={[]} placeholder="" reset={} enableDefaultClassName={} theme="" styles={{ dropdown: {}, dropdownSelected: {}, dropdownSelectedText: {}, dropdownArrow: {}, dropdownList: {}, dropdownItem: {}, }} onSelected={}/><button onClick={}>Reset</button>Props
| Prop name | Type | Default | Description |
|---|---|---|---|
| data | array | ["Option 1", "Option 2", "Option 3"] | Array of options |
| enableDefaultClassName | boolean | true | Enable default class names from the library. Toggle between true and false. |
| id | string | "" | Id of the dropdown (for accessibility) |
| onSelected | function | {} | Function called when an option is selected. |
| placeholder | string | "Select an option..." | Placeholder text |
| reset | boolean | false | Reset the dropdown to default value. Toggle between true and false. |
| styles | object | {} | Inline styles (refer to css styles) |
| theme | string | "light" | Theme of the dropdown |
Examples
Basic Dropdown
Select an option...Open dropdown- Option 1
- Option 2
- Option 3
Customize placeholder
Custom PlaceholderOpen dropdown- Option 1
- Option 2
- Option 3
Customize data
Select an option...Open dropdown- Value 1
- Value 2
- Value 3
Dark Theme
Select an option...Open dropdown- Option 1
- Option 2
- Option 3
Custom Style (inline style)
Select an option...Open dropdown- Option 1
- Option 2
- Option 3
Contributors
Baptiste JAN - https://github.com/BaptisteJ24