mui-downshift
Thin layer over paypal's downshift to use Material-UI 1.0 visual components
For examples of <MuiDownshift> in action, see demo or view the source
Features
- Uses windowing for performance (via react-virtualized)
- Asynchronous loading of items
- Infinite scrolling
- Paginated loading
- Delayed loading of items until menu is opened
- Customizable rendering (see
getListItem,getInputProps, etc) - Control opening menu on input focus (or only on explict toggle)
- Control height of menu based on number of items or pixels
- Dynamic row heights using react-virtualized's CellMeasurer
- Uses a portal to solve the z-index / stacking context problem and Material-UI's popover z-index value
- All other capabilities inherited from
downshift
Props
| Property | Type | Required | Description |
|---|---|---|---|
items |
Array | ✓ | Items to show in menu |
getListItem |
Function | Return an instance of Material-UI's <ListItem /> for each item. defaultProps implementation handles simple cases. |
|
getListItemKey |
Function | If defined, should return a deterministic key based on index within items, instead of just the default (default). Passed to react-virtualized's CellMeasurer keyMapper prop. Defining helps resolve an issue with menu changing size or the scroll position jumping around when appending more items. See the paginated fetch for an example. |
|
getInputProps |
Function | Customize look of Material-UI's <FormControl> and <Input />. Result of function is merged with Downshift's getInputProps |
|
showEmpty |
Boolean | If true, will render a single item if items is empty. Will call getListItem (if defined) with a null item to handle display |
|
includeFooter |
Boolean | If true, will render an additional item as the last item. Will call getListItem (if defined) with a null item to handle display. Useful for paginated scrolling (see demo) and showing loading status beyond the loading prop. |
|
getInfiniteLoaderProps |
Function | If provided, will wrap menu in react-virtualized InfiniteLoader and pass the props returned from the function. Be sure to provide all required props (isRowLoaded, rowCount, and loadMoreRows). Used for infinite scrolling (see demo). |
|
getVirtualListProps |
Function | Pass or override props provided to underlying react-virtualized List component. Note: Setting rowHeight will remove CellMeasurer usage, which is used to calculate heights dynamically. This can provide better performance, especially if set as a static value (ex. 48) |
|
getRootProps |
Function | Provide props to the root element that wraps the input and menu components | |
menuItemCount |
Number | Number of items to show on menu before scrolling. Default 5 |
|
menuHeight |
Number | Number of pixels to set menu before scrolling. Overrides menuItemCount if set. Default null |
|
loading |
Boolean | Show loading indicator | |
focusOnClear |
Boolean | Focus input after clearing. See issue #9 | |
all props available on downshift |
itemToString, onChange, onStateChange, ... |
||
variant |
'standard', 'filled', 'outlined' | MUI input variant. Default 'standard' |
Running Storybook
This project has some storybook stories.
To run storybook, you have to install the story dependencies first:
$ cd stories$ yarn install$ cd ..Then use yarn to run the storybook script:
$ yarn storybook