2.0.2 • Published 1 month ago
react-hook-select v2.0.2
React-hook-select
A react select component using hooks & typescript.
Installation and usage
yarn add react-hook-select
import React from "react";
import ReactHookSelect from "react-hook-select";
function App() {
return (
<ReactHookSelect
label="select"
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.
import "react-hook-select/index.scss";
Props
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.
2.0.2
1 month ago
2.0.1
3 months ago
2.0.0
3 months ago
1.6.3
1 year ago
1.6.2
1 year ago
1.6.1
2 years ago
1.6.0
2 years ago
1.4.2
2 years ago
1.5.0
2 years ago
1.4.1
2 years ago
1.4.0
3 years ago
1.3.7
3 years ago
1.3.8
3 years ago
1.3.6
3 years ago
1.3.5
3 years ago
1.3.4
3 years ago
1.3.3
3 years ago
1.2.0
3 years ago
1.3.2
3 years ago
1.3.1
3 years ago
1.3.0
3 years ago
1.2.1
3 years ago
1.1.1
3 years ago
1.1.0
3 years ago
1.0.0
3 years ago