{"id":13436414,"url":"https://github.com/alpertuna/react-metismenu","last_synced_at":"2025-03-18T21:30:28.349Z","repository":{"id":57334564,"uuid":"54560961","full_name":"alpertuna/react-metismenu","owner":"alpertuna","description":"A ready / simple to use, highly customizable, updateable, ajax supported, animated and material designed menu component for React","archived":true,"fork":false,"pushed_at":"2019-07-18T20:29:22.000Z","size":844,"stargazers_count":175,"open_issues_count":15,"forks_count":94,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-10T03:06:51.996Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-metismenu","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/alpertuna.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2016-03-23T13:14:57.000Z","updated_at":"2024-07-19T20:21:11.000Z","dependencies_parsed_at":"2022-09-06T06:13:08.367Z","dependency_job_id":null,"html_url":"https://github.com/alpertuna/react-metismenu","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alpertuna%2Freact-metismenu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alpertuna%2Freact-metismenu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alpertuna%2Freact-metismenu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alpertuna%2Freact-metismenu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alpertuna","download_url":"https://codeload.github.com/alpertuna/react-metismenu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244310266,"owners_count":20432504,"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":[],"created_at":"2024-07-31T03:00:47.911Z","updated_at":"2025-03-18T21:30:27.607Z","avatar_url":"https://github.com/alpertuna.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","UI Components","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["Uncategorized","Menu"],"readme":"#### NOTE: This library is not under active development now.\n\n[![Build Status](https://travis-ci.org/alpertuna/react-metismenu.svg?branch=master)](https://travis-ci.org/alpertuna/react-metismenu)\n[![Coverage Status](https://coveralls.io/repos/github/alpertuna/react-metismenu/badge.svg)](https://coveralls.io/github/alpertuna/react-metismenu)\n[![npm version](https://badge.fury.io/js/react-metismenu.svg)](https://badge.fury.io/js/react-metismenu)\n[![peerDependencies Status](https://david-dm.org/alpertuna/react-metismenu/peer-status.svg)](https://david-dm.org/alpertuna/react-metismenu?type=peer)\n\n[![NPM](https://nodei.co/npm/react-metismenu.png?compact=true)](https://nodei.co/npm/react-metismenu/)\n\n# react-metismenu\nA ready / simple to use, highly customizable, updateable, ajax supported, animated and material designed menu component for [React](https://facebook.github.io/react/)\n\nDemo\n====\nHere is a simple demo to show animations and actions with standart theme. [Go to demo](https://alpertuna.github.io/react-metismenu/)\n\n`react-metismenu-router-link` link component to use with `react-router`. [Go to demo](https://alpertuna.github.io/react-metismenu-router-link) - [Extension Page](https://github.com/alpertuna/react-metismenu-router-link)\n\nInstall\n=======\n\n```console\nnpm install --save react-metismenu\n```\n\nUsage\n=====\n\nWith Ecma Script 6 and React Loaders\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport MetisMenu from 'react-metismenu';\n\nReactDOM.render(\u003cMetisMenu /\u003e, document.getElementById('dom_id'));\n```\n\nWithout Loaders (ES5)\n```javascript\nconst React = require('react');\nconst ReactDOM = require('react-dom');\nconst MetisMenu = require('react-metismenu');\n\nReactDOM.render(\n    React.createElement(MetisMenu),\n    document.getElementById('dom_id')\n);\n```\n\nAlso you should embed core css file to your html for material design and transition effects to work.\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.rawgit.com/alpertuna/react-metismenu/master/dist/react-metismenu-standart.min.css\" /\u003e\n```\nYou can find this css in your `node_modules/react-metismenu/dist` to embed locally.\n\nProperties\n==========\n### MetisMenu (React Component) Properties\n\n+ Updateable Properties (by `state`)\n  - Properties To Set Content (See [Properties For Each Item In Content](#properties-for-each-item-in-content))\n    * {Object[]} [`content`=[]] - It keeps all recursive structure of Metismenu\n    * {string | Object[]} [`ajax`] - Url or ajax settings object to get menu as json from remote. (See [Remote Contents](#remote-contents))\n  - [Active Link Selectors](#active-link-selectors) (Higlights and drops down all parents if it is a submenu item)\n    * {boolean} [`activeLinkFromLocation`] - Automatically highlights link matched item `to` and browser location.\n    * {string | number} [`activeLinkId`] - Find and highlight according to item `id`.\n    * {string} [`activeLinkTo`] - Find and highlight according to item `to`.\n    * {string} [`activeLinkLabel`] - Find and highlight according to item `label`.\n\n\n+ Non-Updateable Properties (by `state`)\n  - [Customizing Styles](#customizing-styles)\n    * {string} [`className`] - Class name for main metismenu wrapper\n    * {string|func} [`classNameContainer`] - Class name or dynamic class name producer callback for item container (Affects `ul`)\n    * {string} [`classNameContainerVisible`] - Additional class name when container is visible (Affects `ul`)\n    * {string} [`classNameItem`] - Class name for items in container (Affects `li`)\n    * {string} [`classNameItemActive`] - Additional class name when item link is active (Affects `li`)\n    * {string} [`classNameItemHasActiveChild`] - Additional class name when any child or grandchild item link is active (Affects `li`)\n    * {string} [`classNameItemHasVisibleChild`] - Additional class name when any child or grandchild item link is visible (Affects `li`)\n    * {string} [`classNameLink`] - Class name for links in items (Affects `a`)\n    * {string} [`classNameLinkActive`] - Additional class name when link is active (Affects `a`)\n    * {string} [`classNameLinkHasActiveChild`] - Additional class name when any child or grandchild link is active (Affects `a`)\n    * {string} [`classNameIcon`] - Class name for link icons\n    * {string} [`classNameStateIcon`] - Class name for state indicators of submenu\n\n    * {boolean} [`noBuiltInClassNames`=false] - When true, core css class names won't be used\n\n    * {string} [`iconNamePrefix`=\"fa fa-\"] - Prefix for all icon's style class name\n    * {string} [`iconNameStateHidden`=\"caret-left\"] - Icon name for state of collapsed containers\n    * {string} [`iconNameStateVisible`=\"caret-left rotate-minus-90\"] - Icon name for state of opened containers\n  - [Customizing Link Component](#customizing-link-component)\n    * {React.Component} [`LinkComponent`=DefaultLink] - Handles link components of all items\n  - Event Listeners\n    * {callback} [`onSelected`] - Function is called when a menu is selected.\n  - [Using With Redux](#using-with-redux)\n    * {string} [`reduxStoreName`=\"metisMenuStore\"] - Redux store field name for `react-metismenu` to use\n    * {object} [`useExternalReduxStore`] - Created redux store\n\n### Properties For Each Item In Content\n* {string} [`icon`] - Icon class name of item\n* {string} `label` - Label of item\n* {string} [`to`] - Href address to link (if item has submenu, `to` property will be ignored)\n* {boolean} [`externalLink`] - If true link opens page in new tab/window\n* {Object[]} [`content`] - Sub menu of item. (For [Flat Contents](#flat-contents) you may use `id` and `parentId` properties instead.)\n* {string | number} [`id`] - Necessary for [Flat Contents](#flat-contents), or useful when activating a link of menu contains non-unique links. Possbile values are; not empty string, or greater than `0` if it is number.\n* {string | number} [`parentId`] - Necessary for [Flat Contents](#flat-contents). If item has no parent, top item, `parentId` should be falsy -one of `false`, `undefined`, `null`, empty string or number `0`, **not** string `\"0\"`.\n\n\n**Note for all properties**\n\u003e Curly brackets {...} refers to property type.\n\u003e After types, square brackets [...] means that property is optional.\n\u003e Equal sign = in square brackets shows its default value.\n\nExamples\n========\n\n### Simple Usage\nSimple usage with recursive content object.\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport MetisMenu from 'react-metismenu';\n\nconst content=[\n    {\n        icon: 'icon-class-name',\n        label: 'Label of Item',\n        to: '#a-link',\n    },\n    {\n        icon: 'icon-class-name',\n        label: 'Second Item',\n        content: [\n            {\n                icon: 'icon-class-name',\n                label: 'Sub Menu of Second Item',\n                to: '#another-link',\n            },\n        ],\n    },\n];\n\nReactDOM.render(\n  \u003cMetisMenu content={content} activeLinkFromLocation /\u003e,\n  document.getElementById('root')\n);\n```\n\nSee [Properties For Each Item In Content](#properties-for-each-item-in-content).\n\nSee [activeLinkFromLocation](#activelinkfromlocation) property.\n\n### Flat Contents\nYou may get menu content from a sql server. In this case, you can pass the content directly into `react-metismenu` without processing data. Here is flat json content example;\n```json\n[\n    {\n        \"id\": 1,\n        \"icon\": \"icon-class-name\",\n        \"label\": \"Label of Item\",\n        \"to\": \"#a-link\"\n    },\n    {\n        \"id\": 2,\n        \"icon\": \"icon-class-name\",\n        \"label\": \"Second Item\"\n    },\n    {\n        \"id\": 3,\n        \"parentId\": 2,\n        \"icon\": \"icon-class-name\",\n        \"label\": \"Sub Menu of Second Item\",\n        \"to\": \"#another-link\"\n    }\n]\n```\n\n### Remote Contents\nYou are able to get json content from remote. Content may be recursive or flat. `react-metismenu` uses [simple-ajax](https://www.npmjs.com/package/simple-ajax) to send ajax request. You can pass just url string or object with these [Available Options](https://www.npmjs.com/package/simple-ajax#available-options) to `ajax` prop.\n\n```javascript\n\u003cMetisMenu ajax=\"/get-menu.php\" /\u003e\n```\n```javascript\n\u003cMetisMenu ajax={{\n    url: \"/service.php\",\n    method: \"POST\",\n    data: {\n        \"method\": \"get-menu\",\n    },\n}} /\u003e\n```\n\nActive Link Selectors\n=====================\n### With Properties\nUsing properties make you able to update active link via `state`.\n\n##### `activeLinkFromLocation`\n\nAutomatically highlight link matched item `to` and browser location.\n\nIt tries these posibilities to match location;\n```javascript\n[\n  window.location.pathname + window.location.search, // /path?search\n  window.location.hash, // #hash\n  window.location.pathname + window.location.search + window.location.hash, // /path?search#hash\n]\n```\n\nUsage Example\n```javascript\n\u003cMetisMenu activeLinkFromLocation /\u003e\n```\n\n##### `activeLinkId`\n\nFind and highlight according to item `id`.\nIt should be not empty string, or greater than `0` if it is number.\n\nUsage Example\n```javascript\n\u003cMetisMenu activeLinkId={this.state.activeLinkId} /\u003e\n```\n\n##### `activeLinkTo`\n\nFind and highlight according to item `to`.\n\nUsage Example\n```javascript\n\u003cMetisMenu activeLinkTo=\"/users\" /\u003e\n```\n\n##### `activeLinkLabel`\n\nFind and highlight according to item `label`.\n\nUsage Example\n```javascript\n\u003cMetisMenu activeLinkLabel=\"User List\" /\u003e\n```\n\n\u003e Note that, if you like to use more than one selector (`activeLinkTo`, `activeLinkLabel`, ...) at the same time, while setting the prop using one of them, you should set other props to `null` or `undefined`.\n\u003e For example; `this.setState({ metisMenuActiveLinkId: null, metisMenuActiveLinkLabel: 'A Label' });`. Otherwise, your component may not change active link.\n\n### With Methods\nAlso, you can update active links with methods accessed from reference\n\n##### `changeActiveLinkFromLocation()`\n\nSame with [activeLinkFromLocation](#activelinkfromlocation) property.\n\nUsage Example\n```javascript\nclass App extends React.Component {\n    //...\n\n    foo() {\n        //...\n        this.refs.menu.changeActiveLinkFromLocation();\n        //...\n    }\n\n    render() {\n        return (\n            \u003cdiv\u003e\n                ...\n                \u003cMetisMenu ref=\"menu\" /\u003e\n                ...\n            \u003c/div\u003e\n        );\n    }\n}\n```\n\n##### `changeActiveLinkId(id)`\n\nSame with [activeLinkId](#activelinkid) property.\n\nUsage Example\n```javascript\nclass App extends React.Component {\n    //...\n\n    foo() {\n        //...\n        this.refs.menu.changeActiveLinkId(3);\n        //...\n    }\n\n    render() {\n        return (\n            \u003cdiv\u003e\n                ...\n                \u003cMetisMenu ref=\"menu\" /\u003e\n                ...\n            \u003c/div\u003e\n        );\n    }\n}\n```\n\n##### `changeActiveLinkTo(to)`\n\nSame with [activeLinkTo](#activelinkto) property.\n\nUsage Example\n```javascript\nclass App extends React.Component {\n    //...\n\n    foo() {\n        //...\n        this.refs.menu.changeActiveLinkTo('/users');\n        //...\n    }\n\n    render() {\n        return (\n            \u003cdiv\u003e\n                ...\n                \u003cMetisMenu ref=\"menu\" /\u003e\n                ...\n            \u003c/div\u003e\n        );\n    }\n}\n```\n\n##### `changeActiveLinkLabel(label)`\n\nSame with [activeLinkLabel](#activelinklabel) property.\n\nUsage Example\n```javascript\nclass App extends React.Component {\n    //...\n\n    foo() {\n        //...\n        this.refs.menu.changeActiveLinkLabel('User List');\n        //...\n    }\n\n    render() {\n        return (\n            \u003cdiv\u003e\n                ...\n                \u003cMetisMenu ref=\"menu\" /\u003e\n                ...\n            \u003c/div\u003e\n        );\n    }\n}\n```\n\nCustomizing Styles\n==================\nAfter rendering `react-metismenu` with recursive content, output dom structure will be like this;\n```html\n\u003cdiv\u003e             - main wrapper\n  ====================================== Top container\n  \u003cul\u003e            - container\n    \u003cli\u003e          - item\n      \u003ca\u003e         - link\n        \u003ci /\u003e     - icon\n        \" \"       - label\n        \u003ci /\u003e     - state icon (caret icon)\n      \u003c/a\u003e\n      ---------------------------------- First depth sub container\n      \u003cul\u003e        - container\n        \u003cli\u003e      - item\n          \u003ca\u003e     - link\n            \u003ci /\u003e - icon\n            \" \"   - label\n          \u003c/a\u003e\n        \u003c/li\u003e\n        ...\n      \u003c/ul\u003e\n      ----------------------------------\n    \u003c/li\u003e\n    ...\n  \u003c/ul\u003e\n  ======================================\n\u003c/div\u003e\n```\n\n#### Overriding Styles\nMetismenu with default setting adds built-in css class names.\n\nThese class names are, according to figure above;\n- main wrapper - `metismenu`\n- container - `metismenu-container` and `visible` for opened containers\n- item - `metismenu-item`\n- link - `metismenu-link`, `active` for active links, and `has-active-child` for links has active child or grandchild\n- icon - `metismenu-icon`\n- state icon - `metismenu-state-icon`\n\nYou can overide these class names to customize with your own css.\n\n**Note:** Containers' default state is hidden and there is no assigned class to tell.\n\n#### Using Your Own Class Names\nYou can tell metismenu to add your own class names by sending them as props.\n\nProperty names are, according to figure above;\n- main wrapper - `className`\n- container - `classNameContainer` and `classNameContainerVisible` for opened containers\n- item - `classNameItem`, `classNameItemActive` for active items, and `classNameItemHasActiveChild` for items has active child or grandchild\n- link - `classNameLink`, `classNameLinkActive` for active links, and `classNameLinkHasActiveChild` for links has active child or grandchild\n- icon - `classNameIcon`\n- state icon - `classNameStateIcon`\n\nUsing these props **not** overwrites built-in class names, just appends.\n\n**Note:** Containers' default state is hidden and there is no prop to tell.\n\n#### Not Using Built-in Styles\nIf you don't want use core styles you can remove them completely by setting `noBuiltInClassNames` prop `true`.\nIn this case you are responsable for all styling including visibility states of containers.\n\n#### Icon Framework\nBy default, metismenu uses [Font Awesome](http://fontawesome.io/) for icons and prepends all icon names with `fa fa-`.\n\nTo use another icon framework, you can change prefix with `iconNamePrefix` prop.\n\nTo change state icons (shows submenu is visible or not) you can use these props;\n- `iconNameStateVisible`\n- `iconNameStateHidden`\n\nThese icons are also prepended by `iconNamePrefix`.\n\n### Customizing Style Example\n```javascript\n\u003cMetisMenu\n  className=\"my-menu\"\n  clasNameLink=\"my-menu-link\"\n  iconNameStateVisible=\"minus\"\n  iconNameStateHidden=\"plus\"\n/\u003e\n```\n\n\nCustomizing Link Component\n==========================\nYou are able to change the link component of each item.\nYou may use another html tag, want to inject some properties or change operation logic. In this case, you can customize and use your own link component sending to `react-metismenu` component as `LinkComponent` property.\n\n#### Props to use in your Link Component\n- {string} `className` - Passes built-in class name and `classNameLink` prop of top component\n- {string} `classNameActive` - Passes built-in class name and `classNameLinkActive` prop of top component\n- {string} `classNameHasActiveChild` - Passes built-in class name and `classNameLinkHasActiveChild` prop of top component\n- {boolean} `active` - Active link or not state\n- {boolean} `hasActiveChild` - Has active child or grand child state\n- {boolean} `hasSubMenu` - Has sub menu or not state\n- {function} `toggleSubMenu` - If item has submenu, toggle sub menu callback. Otherwise dead function.\n- {function} `activateMe` - If it is normal link, callback that activates link (to assign active class name) and makes all parents beware they have active link. Also triggers `onSelected` and given parameters are passed to listener.\n- {string} [`to`] - Contains `to` info of the item comes from menu content object\n- {boolean} [`externalLink`] - Destination is external or not\n- {React.Component} `children` -  Ready to render content of link - contains icon, label and other stuff\n\n#### An Example\nDefining CustomLink Component\n```javascript\nclass CustomLink extends React.Component {\n  constructor() {\n    super();\n\n    this.onClick = this.onClick.bind(this);\n  }\n\n  onClick(e) {\n    if (this.props.hasSubMenu) this.props.toggleSubMenu(e);\n    else {\n      /*\n       * your own operation using \"to\"\n       * myGotoFunc(this.props.to);\n       * or\n       * this.props.activateMe(/* Parameters to pass \"onSelected\" event listener */);\n       */\n\n      this.props.activateMe({\n        newLocation: this.props.to,\n        selectedMenuLabel: this.props.label,\n      });\n    }\n  }\n\n  render() {\n    return (\n      \u003cbutton className=\"metismenu-link\" onClick={this.onClick}\u003e\n        {this.props.children}\n      \u003c/button\u003e\n    );\n  }\n};\n```\nInjecting CustomLink into Menu component\n```javascript\n\u003cMenu content={menu} LinkComponent={CustomLink} /\u003e\n```\nAlso, as another example, you can look into [DefaultLink Component](https://github.com/alpertuna/react-metismenu/blob/master/src/components/DefaultLink.jsx) source.\n\nUsing With Redux\n================\n`react-metismenu` uses Redux and if you also use Redux in your application, `Provider`s will confilict.\nThat's why you should pass your store using `useExternalReduxStore` prop.\nIn this case, `react-metismenu` will use your application's `Provider`.\n\n**An example application;**\n```javascript\nimport { createStore, combineReducers } from 'redux';\nimport MetisMenu from 'react-metismenu';\nimport metisMenuReducer from 'react-metismenu/lib/reducers';\n\nconst reducers = combineReducers({\n    yourStore: yourReducers,\n    // Your other reducer assignments...\n    metisMenuStore: metisMenuReducer, // Here \"metisMenuStore\" is default and it can be changed with \"reduxStoreName\" prop\n});\nconst store = createStore(reducers, {\n    yourStore: { // This name should be the same with above you assigned your reducer\n        // Your application state\n    },\n   // Your other initial states...\n   // There is no need to initalize \"metisMenuStore\"\n});\n\n\u003cMetisMenu ... useExternalReduxStore={store} /\u003e\n```\nYou can also use multiple react-metismenu with same external store\n\nExtensions\n==========\n## react-metismenu-router-link\nIf you use `react-router`, this extension does the job. It provides link component to use `react-metismenu` with `react-router`.\n- Npm package `react-metismenu-router-link`\n- [Source page](https://github.com/alpertuna/react-metismenu-router-link)\n- [Demo page](https://alpertuna.github.io/react-metismenu-router-link)\n\nDevelopment / Contributing\n==========================\nIf you like to add or improve something, follow these steps.\n\n```console\n# Change dir to your playground folder and clone repository.\ngit clone git@github.com:alpertuna/react-metismenu.git\n\n# Enter cloned folder and install necessary development node libraries\ncd react-metismenu\nnpm install\n```\n\n#### Folders and Files\n - **`src`** folder keeps all source files of `react-metismenu`\n - **`less`** folder keeps source style files.\n - **`dev`** is playground folder to develop `react-metismenu`.\n\nUnder **`dev`** folder, `index.html` is index file of our web server. You don't need to touch here if you don't want to add any other external js or css files.\n`App.js` file is entry point for our react application, and you can test your alterations in here. There is a working example in `App.js` and it imports `react-metismenu` directly from source code, that's why there is no need to build it while developing. Similarly less folder is imported directly through less compiler pipe.\n\n#### To run dev server,\n```console\nnpm run dev-server\n# or shortly\nnpm start\n```\nAnd open `localhost:8080` in browser.\nDev server uses webpack and it has hot modul replecament plugins, so when you change and save any source file, it will rebuild virtual bundle and send signal browser to refresh page automaticly.\n\n#### Source Code Writing Standarts\nFor source code quality, I applied Airbnb rules. Because it focuses on React more than others.\n\n#### After Develop,\n```console\n# TESTING\n# Runs all necessary test scripts (linting and unit-testing)\nnpm test\n\n# Or you can test specific parts of project\n# Lints js files according to Airbnb rules using Eslint\nnpm run lint-confs\nnpm run lint-src\nnpm run lint-dev\n# Runs unit test using Jest\nnpm run unit-test\n\n# BUILDING\n# Builds lib and dist files together\nnpm run build\n\n# Or you can build them seperately\n# Builds js and css dist files\nnpm run build-dist-js\nnpm run build-dist-js-min\nnpm run build-dist-css\nnpm run build-dist-css-min\n# Builds lib files for npm\nnpm run build-lib\n```\n\n\u003e You can correct typos or improve meanings in documents as well as contributing code.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falpertuna%2Freact-metismenu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falpertuna%2Freact-metismenu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falpertuna%2Freact-metismenu/lists"}