@bgryks/react-multiselect NPM

react-multiselect

Multiselect component for reactjs.

Download

npm install @bgryks/react-multiselect

or

yarn add @bgryks/react-multiselect

import { Multiselect } from "@bgryks/react-multiselect"

Type

`ChoiceItem`

interface ChoiceItem {
 [value: string]: any;
}

`MultiselectProps`

interface MultiselectProps {
defaultOpen?: boolean;
optionId?: string;
optionText?: string;
disabledItem?: string;
suffix?: string;
disabled?: boolean;
loading?: boolean;
loadingIcon?: ReactElement;
inputProps?: React.DetailedHTMLProps<
React.InputHTMLAttributes<HTMLInputElement>,
HTMLInputElement>;
inputContainerClassName?: string;
choices?: ChoiceItem[];
defaultSelected?: string;
showStyle?: "items" | "numbers";
deleteIcon?: ReactElement;
clearIcon?: ReactElement;
menuUpIcon?: ReactElement;
menuDownIcon?: ReactElement;
noContentMessage?: string | ReactElement;
countForScrollFunction?: number;
showSelectedMessage?: (items: ChoiceItem[]) => string | ReactElement;
onSelectedsChange?: (items: ChoiceItem[]) => void;
onInputValChange?: (val: string) => void | string;
onScrollBottom?: (items: ChoiceItem[]) => void;
}

Props

Name	Type	Description	Default
choices?	`ChoiceItem[]`	List of choices.	`[]`
clearIcon?	`ReactNode`	Button to clear all items to the right of the input.	`<MenuTimes/>`
defaultSelected?	`string`	The property name of initial chocies. If the value of the specified property is true, the item will be selected initially.	`default`
disabled?	`boolean`	If true, component is disabled.	`false`
disabledItem?	`string`	Property name of the choices which will be disabled.	`"disabled"`
countForScrollFunction?	`number`	A number that specifies how many item must be left in the result container after scrolling to work the process defined in the onScrollBottom method.	`3`
inputContainerClassName?	`string`	Classname of the div containing the input.	`""`
inputProps?	`object`	React input props .	`{}`
loading?	`boolean`	If true, a loading icon will be displayed at the end of the input.	`false`
loadingIcon?	`ReactElement`	An React component for the loading state.	`<Loading/>`
menuDownIcon?	`ReactElement`	An React component for the menu down click button.	`<MenuDown/>`
menuUpIcon?	`ReactNode`	An React component for the menu up click button.	`<MenuUp/>`
noContentMessage?	ReactElement \| string	Content message telling users that the choices not found.	`"No content"`
onInputValChange?	(val: string) => void \| string	Callback function that runs when input value has been changed.	`undefined`
onScrollBottom?	`(items: ChoiceItem[]) => void`	Callback function that runs when scrolled to bottom.	`undefined`
onSelectedsChange?	`(items: ChoiceItem[]) => void`	Callback function that runs when state of selected items has changed.	`undefined`
open?	`boolean`	If true, the menu list container will initially be displayed.	`false`
optionId?	`string`	Property name that specifies the unique value of the choices.	`"id"`
optionText?	`string`	Property name that specifies the text value of the choices.	`"value"`
deleteIcon?	`ReactElement`	Delete icon for each selected items.	`<MenuTimes/>`
showSelectedMessage?	(items: ChoiceItem[]) => string \| ReactNode	Message showing users selected items. It works if the `showStyle` property is "numbers".	`(items: ChoiceItem[]) => items.length + " items selected"`
showStyle?	"items" \| "numbers"	If "items", each item in the list will be displayed as a box in the container. If "numbers", only one box which containing message to show will be displayed	`"items"`
suffix?	`string`	Class suffix to separate elements used in the component. Example: `react-multiselect-container-myclassname`	`""`

Custom Styling

Classname	Description
`.react-multiselect-input-container`	The wrapper element containing input content and indicators in the component.
`.react-multiselect-input-content`	The element containing the selected items and input element.
`.react-multiselect-input-selected-item`	Selected item boxes in the `.react-multiselect-input-content`.
`.react-multiselect-input-textbox`	The html input element in the `.react-multiselect-input-content`
`.react-multiselect-result-container`	The container element of the result of choices.
`.react-multiselect-result-item`	Result items of the result container.
`.react-multiselect-input-indicators`	The container of the indicators containing times icon and menu icons.