@dccs/react-searchable-select-mui

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

or

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}
/>

Contributing

License

@dccs/react-searchable-select-mui is MIT licensed