1.4.2 • Public • Published


    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


    • 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


    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


    npm i mui-downshift

    DownloadsWeekly Downloads






    Unpacked Size

    35.8 kB

    Total Files


    Last publish


    • techniq