A react select component using hooks
npm install react-hook-selectA react select component using hooks & typescript.
```
yarn add react-hook-select
`js
import React from "react";
import ReactHookSelect from "react-hook-select";
function App() {
return (
enableMultiple={true}
enableSearch={false}
placeholder={"choose option"}
defaultValue={[]}
options={[
{ label: "Group A", value: "Group A", group: true },
{ label: "a", value: "a" },
{ label: "Group B", value: "Group B", group: true },
{ label: "b", value: "b" },
]}
/>
);
}
`
Use SCSS file directly and can override variables.
`js`
import "react-hook-select/index.scss";
- selectWrapperProps: All props applicable to DIV element.selectInputProps
- : All props applicable to Input element.searchInputProps
- : All props applicable to Input element.options
- : Array of options, with possible values - label, value, disabled, group, optionProps - attributes set to li element.defaultValue
- : Array of string(for single/multiple select), default value.value
- : Array of string(for single/multiple select), provide to be a controlled component.enableMultiple
- : Should enable selecting multiple options.labelProps
- : All props applicable to label element.label
- : Label for the select element.placeholder
- : Placeholder for the select element.getValue
- : Callback function returning array of values.enableSearch
- : Should enable options search.chipView
- : Should show selected values as a chip, only for multi select.chipViewEnableRemove
- : For chip view, enable showing close icon.renderOption
- : Custom render function for option.renderChip
- : Custom render function for chip.dropdownOffset
- : Can provide two values top and bottom which specifies the gap between the top and bottom edge of screen and the select option wrapper.showPlaceholderInOptions
- : Can enable/disable placeholder to be shown in list of options tooenableValuesOutsideOfOptions
- : Normal cases, only if the value is present in options it will be shown, this can be enabled to show even if option is not present in the list passed.searchIcon
- : Icon for input box when search enabled.renderDropDownIcon
- : Provide a custom dropdown icon instead of default.canClearValue`: Ability to clear selected value by showing 'X' icon to clear.
-