@dccs/react-searchable-select-mui NPM

react-searchable-select-mui ·

A simple custom select component including a searchfield.

Here is a Demo:https://dccs-it-business-solutions.github.io/react-searchable-select-mui/

Installation

You should install react-searchable-select-mui with npm or yarn:

npm install @dccs/react-searchable-select-mui

yarn add @dccs/react-searchable-select-mui

This command will download and install react-searchable-select-mui

Peer Dependencies:

npm install @material-ui/core

How it works

SearchableSelect renders the following simplified structure:

<FormControl>
  <InputLabel>Label</InputLabel>
  <Select>
    <TextField />
    <MenuItem>Remove Selection</MenuItem>
    <MenuItem>Option 1</MenuItem>
    <MenuItem>Option 2</MenuItem>
    <MenuItem>Option X</MenuItem>
  </Select>
  <FormHelperText />
</FormControl>

All Material UI-Select Props get passed to the Select Component https://material-ui.com/api/select/

Native is not supported.

Multiple is not supported yet.

Additional Props:

Name	Type	Description
label	`string`	Label of the Select Component
searchFieldPlaceholder	`string`	Gets passed to the placeholder property of . Default: "Search..."
removeSelectionText	`string`	Text für the Remove Selection MenuItem. Default: "Remove selection"
options	`KeyValuePair[] or any[]`	Options to render. By default it expects an array like this: {key:1, value:"Entry 1"}, {key:2, value:"Entry 2"}.
keyPropFn	`(option:KeyValuePair or any)=>any`	Required function if you want to use a different property names for key and value. If you want to use id instead of key: keyPropFn={(option: any) => option.id}
valuePropFn	`(option:KeyValuePair or any)=>any`	Required function if you want to use a different property names for key and value. If you want to use name instead of value: valuePropFn={(option: any) => option.name}
formControlProps	https://material-ui.com/api/form-control/	Props that get passed to the formcontrol component
formHelperTextProps	https://material-ui.com/api/form-helper-text/	Props that get passed to the FormHelperText component
showAll	`boolean`	If true it shows all available options. Undefined or false shows 20 per default
maxVisibleOptions	`number`	Set the number of visible options to show. (Choose number below 50 since MUI-MenuItems are very laggy)

const Example = () => {
  const [value, setValue] = React.useState<unknown>();

  const handleChange = (
    event: React.ChangeEvent<{ name?: string; value: unknown }>
  ) => {
    setValue(event.target.value);
  };

  return (
    <SearchableSelect
      label="Searchable Select"
      value={value}
      onChange={handleChange}
      options={[
        { id: 1, value: "Entry 1" },
        { id: 2, value: "Entry 2" },
        { id: 3, value: "Entry 3" }
      ]}
    />
  );
};

With Custom Prop Names

<SearchableSelect
  label="Searchable Select"
  value={value}
  onChange={handleChange}
  options={[
    { name: 1, property: "Entry 1" },
    { name: 2, property: "Entry 2" },
    { name: 3, property: "Entry 3" }
  ]}
  keyPropFn={(option: any) => option.name}
  valuePropFn={(option: any) => option.property}
/>