@dccs/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