0.2.7 • Published 1 year ago
@coopdigital/component-searchable-dropdown v0.2.7
Searchable Dropdown
A Co-op styled searchable dropdown (aka combobox) React component built using Downshift.
Installation
Install via npm or yarn:
npm install @coopdigital/component-searchable-dropdown
yarn add @coopdigital/component-searchable-dropdownPrerequisites
You must have the Co-op foundations and foundations-forms css packages installed in your project. You will also need React 17 or higher.
@import "@coopdigital/foundations/dist/vars/vars.css";
@import "@coopdigital/foundations/dist/foundations.css";
@import "@coopdigital/foundations-forms/dist/forms.css";Importing
@import "@coopdigital/component-searchable-dropdown/dist/styles.css";import { SearchableDropdown } from "@coopdigital/component-searchable-dropdown";Basic Usage
<SearchableDropdown
label="My favourite animal is a..."
id="animals"
options={["Cat", "Dog", "Frog", "Panda", "Sloth"]}
/>Required props
These props are required for the component to render:
| prop | type | description |
|---|---|---|
label | string | Text for the associated element label. |
id | string | A unique identifier for the element. |
options | array | Array of strings to use for option values |
Additional props
The component can be further customised using the props below:
| prop | type | description | default |
|---|---|---|---|
className | string | Additional class (or classes) to append to the outer coop-c-combobox element | - |
compact | bool | Reduces the input font size to 1rem | false |
noResults | string | String to display when no matching options are found | No relevant options |
onSelect | func | Callback function when an option is selected, receives the selected value as its only parameter | - |
placeholder | string | Placeholder text to display when no option is selected | - |
style | object | CSS object with inline styles to be added to the outer coop-c-combobox element | - |
Kitchen sink
<SearchableDropdown
label="My favourite animal is a..."
id="animals"
options={["Cat", "Dog", "Frog", "Panda", "Sloth"]}
className="additional-class another-class"
compact
placeholder="Select option"
onSelect={(value) => {
console.log(value);
}}
style={{ width: "300px" }}
/>License
Copyright (c) 2022 Co-operative Group Limited. Licensed MIT.