{"id":17004540,"url":"https://github.com/tarikhuber/material-ui-selectable-menu-list","last_synced_at":"2025-04-12T07:08:02.848Z","repository":{"id":57292171,"uuid":"85572403","full_name":"TarikHuber/material-ui-selectable-menu-list","owner":"TarikHuber","description":"Selectable List from Material-UI that can be filled with an array of items","archived":false,"fork":false,"pushed_at":"2018-02-13T14:22:06.000Z","size":896,"stargazers_count":4,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-13T00:11:36.805Z","etag":null,"topics":["array","list","material-ui","react-component","selectable"],"latest_commit_sha":null,"homepage":null,"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/TarikHuber.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-20T12:07:52.000Z","updated_at":"2020-05-10T09:04:25.000Z","dependencies_parsed_at":"2022-08-27T16:50:48.681Z","dependency_job_id":null,"html_url":"https://github.com/TarikHuber/material-ui-selectable-menu-list","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TarikHuber%2Fmaterial-ui-selectable-menu-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TarikHuber%2Fmaterial-ui-selectable-menu-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TarikHuber%2Fmaterial-ui-selectable-menu-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TarikHuber%2Fmaterial-ui-selectable-menu-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TarikHuber","download_url":"https://codeload.github.com/TarikHuber/material-ui-selectable-menu-list/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219848636,"owners_count":16556333,"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":["array","list","material-ui","react-component","selectable"],"created_at":"2024-10-14T04:43:51.934Z","updated_at":"2024-10-14T04:43:52.522Z","avatar_url":"https://github.com/TarikHuber.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Material-UI Selectable Menu List\n[![Build Status][travis-image]][travis-url]\n[![Dependency Status][daviddm-image]][daviddm-url]\n[![License][license-image]][license-url]\n[![Code Coverage][coverage-image]][coverage-url]\n[![Code Style][code-style-image]][code-style-url]\n\n## Table of Contents\n\n- [Description](#description)\n- [Installation](#instalaltion)\n- [Usage](#usage)\n- [Contributing](#contributing)\n\n\n## Description\n\nMaterial-UI Selectable Menu List is a React-Redux component that uses [Material-UI](http://www.material-ui.com/) to create a List from a Array.\nIhe array should contain only the props used for the ListItems and they can have one parameter more `visible`. This will define if the ListItem will be displayed or not. It should make creating dynamic Menues easyer becaus you don't habe to take care of every ListItem seperately.\n\nNesting is also supported. Adding subheadrs and dividers is also no problem. More about that we will see in the [Usage](#usage) part.\n\nManagin an List with only one poroperty as array list of ListItems allowes us to move the array in a seperate file and this way to make the code much easyer to read.\n\nYou can try it out the [DEMO](https://tarikhuber.github.io/material-ui-selectable-menu-list/).\n\n## Installation\n\nThis project can be istalled as npm module using following command:\n\n```bash\nnpm i -S material-ui-selectable-menu-list\n```\n\n## Usage\n\nTo use it just import the component and set as property a list of menu items:\n\n```js\n\nimport {SelectableMenuList} from 'material-ui-selectable-menu-list'\n\nconst folders_list=[\n  {\n    subheader: 'Folders',\n  },\n  {\n    value:'/photos',\n    primaryText: 'Photos',\n    secondaryText: 'Jan 9, 2014',\n    leftAvatar: \u003cAvatar icon={\u003cFileFolder /\u003e} /\u003e,\n    rightIcon: \u003cActionInfo/\u003e\n  },\n  {\n    value:'/recipes',\n    primaryText: 'Recipes',\n    secondaryText: 'Jan 17, 2014',\n    leftAvatar: \u003cAvatar icon={\u003cFileFolder /\u003e} /\u003e,\n    rightIcon: \u003cActionInfo/\u003e\n  },\n  {\n    value:'/work',\n    primaryText: 'Work',\n    secondaryText: 'Jan 28, 2014',\n    leftAvatar: \u003cAvatar icon={\u003cFileFolder /\u003e} /\u003e,\n    rightIcon: \u003cActionInfo/\u003e\n  },\n  {\n    divider: true,\n  },\n  {\n    subheader: 'Files',\n  },\n  {\n    value:'/vacation_itinerary',\n    primaryText: 'Vacation itinerary',\n    secondaryText: 'Jan 20, 2014',\n    primaryTogglesNestedList: false,\n    leftAvatar: \u003cAvatar icon={\u003cActionAssignment /\u003e} backgroundColor={blue500} /\u003e,\n    rightIcon: \u003cActionInfo/\u003e\n  },\n  {\n    value:'/kitchen_remodel',\n    primaryText: 'Kitchen remodel',\n    secondaryText: 'Jan 10, 2014',\n    leftAvatar: \u003cAvatar icon={\u003cEditorInsertChart /\u003e} backgroundColor={yellow600} /\u003e,\n    rightIcon: \u003cActionInfo/\u003e\n  },\n]\n\n...\n\n//then in your component\n  \u003cSelectableMenuList\n    items={folders_list}\n    onIndexChange={this.handleChange}\n    index={index}\n  /\u003e\n\n...\n\n```\n\nBecause it is selectable you will have to send a `index` (string) parameter witch defines witch ListItem should be selected and `onIndexChange` callback witch will handle the ListItem Click event. In the demo applicatgion I use it together with the redux-router to go to another application part and the `index` value comes from the `redux-router` path. That way i have complete navigation menu :)\n\nEvery value in the array elements will be send to the ListItem as prop. You can also send `inline` and `style` to change those properties for each ListItem. The Divider and Subheader elements can also recieve this kind of properties.\n\nAs you can see from the example to add a divider we just have to add one item more with the value `divider: true`.\n\nFor the Subheader just add the value `subheader: \"Some text\"`.\n\nAn complete example can be found in the [App.js](https://github.com/TarikHuber/material-ui-selectable-menu-list/blob/master/demo/src/App.js) of the demo part of this project.\n\n\n## Contributing\n\nEvery help no mather if it is a kritik, suggestion or pull request is welkome :)\n\n[travis-image]: https://travis-ci.org/TarikHuber/material-ui-selectable-menu-list.svg?branch=master\n[travis-url]: https://travis-ci.org/TarikHuber/material-ui-selectable-menu-list\n[daviddm-image]: https://img.shields.io/david/TarikHuber/material-ui-selectable-menu-list.svg?style=flat-square\n[daviddm-url]: https://david-dm.org/TarikHuber/material-ui-selectable-menu-list\n[coverage-image]: https://img.shields.io/codecov/c/github/TarikHuber/material-ui-selectable-menu-list.svg?style=flat-square\n[coverage-url]: https://codecov.io/gh/TarikHuber/material-ui-selectable-menu-list\n[license-image]: https://img.shields.io/npm/l/express.svg\n[license-url]: https://github.com/TarikHuber/material-ui-selectable-menu-list/master/LICENSE\n[code-style-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square\n[code-style-url]: http://standardjs.com/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftarikhuber%2Fmaterial-ui-selectable-menu-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftarikhuber%2Fmaterial-ui-selectable-menu-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftarikhuber%2Fmaterial-ui-selectable-menu-list/lists"}