mui-downshift

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