1.0.3 • Published 5 months ago
grl-dropdown v1.0.3
GRL React DropDown
A flexible React dropdown component that supports both single and multiple selections with customizable styling. Github
Installation
npm install grl-dropdown
Usage
import React from "react";
import GRLDropDown from "grl-dropdown";
const options = [
{ key: "1", description: "Option 1" },
{ key: "2", description: "Option 2" },
];
const App = () => {
const handleDropdownChange = (selected) => {
console.log(selected);
};
return (
<div>
<GRLDropDown
label="Select an option"
options={options}
type="single" // or "multiple"
onDropDownChange={handleDropdownChange}
placeholder="Choose..."
/>
</div>
);
};
export default App;
Props
Prop | Type | Required | Default | Description |
---|---|---|---|---|
label | string | Yes | - | Label text for the dropdown |
options | array | Yes | - | Array of objects with key and description |
type | string | Yes | - | 'single' or 'multiple' |
onDropDownChange | function | Yes | - | Callback function when selection changes |
placeholder | string | No | 'Select items' | Placeholder text |
labelStyles | object | No | {} | Custom styles for label |
dropdownStyles | object | No | {} | Custom styles for dropdown |
containerStyles | object | No | {} | Custom styles for container |
multipleDropdownStyles | object | No | {} | Custom styles for multiple dropdown |
checkboxListStyles | object | No | {} | Custom styles for checkbox list |
checkboxItemStyles | object | No | {} | Custom styles for checkbox items |
initialValue | object/array | No | - | Initial selected value(s) |