{"id":16820452,"url":"https://github.com/techniq/mui-downshift","last_synced_at":"2025-04-09T12:05:01.395Z","repository":{"id":41259779,"uuid":"104653275","full_name":"techniq/mui-downshift","owner":"techniq","description":"Thin layer over paypal's downshift to use Material UI visual components","archived":false,"fork":false,"pushed_at":"2022-12-08T16:57:28.000Z","size":8588,"stargazers_count":91,"open_issues_count":42,"forks_count":24,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-02T08:12:09.711Z","etag":null,"topics":["downshift","material-ui"],"latest_commit_sha":null,"homepage":"https://techniq.github.io/mui-downshift/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/techniq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-24T15:08:48.000Z","updated_at":"2025-03-22T09:31:32.000Z","dependencies_parsed_at":"2023-01-25T15:00:38.781Z","dependency_job_id":null,"html_url":"https://github.com/techniq/mui-downshift","commit_stats":null,"previous_names":[],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techniq%2Fmui-downshift","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techniq%2Fmui-downshift/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techniq%2Fmui-downshift/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techniq%2Fmui-downshift/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/techniq","download_url":"https://codeload.github.com/techniq/mui-downshift/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248036063,"owners_count":21037092,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["downshift","material-ui"],"created_at":"2024-10-13T10:56:50.591Z","updated_at":"2025-04-09T12:05:01.364Z","avatar_url":"https://github.com/techniq.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## mui-downshift\nThin layer over paypal's [downshift](https://github.com/paypal/downshift) to use [Material-UI 1.0](http://material-ui-next.com) visual components\n\nFor examples of `\u003cMuiDownshift\u003e` in action, see [demo](https://techniq.github.io/mui-downshift/) or view the [source](https://github.com/techniq/mui-downshift/tree/master/stories)\n\n### Features\n- Uses windowing for performance (via [react-virtualized](https://github.com/bvaughn/react-virtualized))\n- Asynchronous loading of items\n  - Infinite scrolling\n  - Paginated loading\n  - Delayed loading of items until menu is opened\n- Customizable rendering (see `getListItem`, `getInputProps`, etc)\n- Control opening menu on input focus (or only on explict toggle)\n- Control height of menu based on number of items or pixels\n- Dynamic row heights using react-virtualized's [CellMeasurer](https://github.com/bvaughn/react-virtualized/blob/master/docs/CellMeasurer.md)\n- Uses a portal to solve the z-index / [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) problem and Material-UI's popover z-index [value](https://github.com/callemall/material-ui/blob/master/src/styles/zIndex.js)\n- All other capabilities inherited from `downshift`\n\n### Props\nProperty | Type | Required | Description\n-------- | ---- | -------- | -----------\n`items` | Array | ✓ | Items to show in menu\n`getListItem` | Function | |  Return an instance of Material-UI's `\u003cListItem /\u003e` for each item.  defaultProps implementation handles simple cases.\n`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](https://github.com/bvaughn/react-virtualized/blob/master/docs/CellMeasurer.md#prop-types-1) 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.\n`getInputProps` | Function | | Customize look of Material-UI's `\u003cFormControl\u003e` and `\u003cInput /\u003e`.  Result of function is merged with Downshift's `getInputProps`\n`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\n`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.\n`getInfiniteLoaderProps` | Function |  | If provided, will wrap menu in react-virtualized [InfiniteLoader](https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md) 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).\n`getVirtualListProps` | Function |  | Pass or override props provided to underlying react-virtualized [List](https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md) 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`)\n`getRootProps` | Function | | Provide props to the root element that wraps the input and menu components\n`menuItemCount` | Number | | Number of items to show on menu before scrolling.  Default `5`\n`menuHeight` | Number | | Number of pixels to set menu before scrolling.  Overrides `menuItemCount` if set.  Default `null`\n`loading` | Boolean | |  Show loading indicator\n`focusOnClear` | Boolean | |  Focus input after clearing.  See issue #9\nall props available on `downshift` | |  | `itemToString`, `onChange`, `onStateChange`, ...\n`variant` | 'standard', 'filled', 'outlined' | |  MUI input variant.  Default 'standard'\n\n### Running Storybook\n\nThis project has some [storybook](https://github.com/storybooks/storybook) stories.\n\nTo run storybook, you have to install the story dependencies first:\n\n```bash\n$ cd stories\n$ yarn install\n$ cd ..\n```\n\nThen use yarn to run the `storybook` script:\n\n```bash\n$ yarn storybook\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechniq%2Fmui-downshift","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftechniq%2Fmui-downshift","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechniq%2Fmui-downshift/lists"}