{"id":22624078,"url":"https://github.com/fortunar/react-sidemenu","last_synced_at":"2025-04-11T17:41:09.662Z","repository":{"id":9672422,"uuid":"62960931","full_name":"fortunar/react-sidemenu","owner":"fortunar","description":"React sidemenu component ","archived":false,"fork":false,"pushed_at":"2022-12-09T05:04:42.000Z","size":4095,"stargazers_count":57,"open_issues_count":19,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-06T00:48:22.705Z","etag":null,"topics":["drawer","menu","navigation","react","react-components","side","sidemenu"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fortunar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-09T17:28:02.000Z","updated_at":"2023-06-21T13:26:26.000Z","dependencies_parsed_at":"2023-01-13T15:30:21.050Z","dependency_job_id":null,"html_url":"https://github.com/fortunar/react-sidemenu","commit_stats":null,"previous_names":["banomaster/react-sidemenu"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fortunar%2Freact-sidemenu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fortunar%2Freact-sidemenu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fortunar%2Freact-sidemenu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fortunar%2Freact-sidemenu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fortunar","download_url":"https://codeload.github.com/fortunar/react-sidemenu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248451374,"owners_count":21105859,"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":["drawer","menu","navigation","react","react-components","side","sidemenu"],"created_at":"2024-12-09T00:10:06.381Z","updated_at":"2025-04-11T17:41:09.641Z","avatar_url":"https://github.com/fortunar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# react-sidemenu\n\nLightweight side menu component written in React.js. No jQuery, just CSS3.\n\n\u003cimg src=\"https://image.ibb.co/kEYBhe/Screen_Shot_2018_08_17_at_9_24_09_AM.png\" width=\"300\"\u003e\n\n## Features\n - Pure React.js, no external dependencies\n - Configure via JS objects or via React components\n - Packed with default ready-to-use styling\n - Easy to customize styling guide\n - Custom rendering, collapse control, right-to-left etc.\n - Flow type checking support\n\n## Usage\nInstall the component with NPM:\n\n    npm install react-sidemenu --save\nImport the component in your React.js application:\n\n    import SideMenu from 'react-sidemenu';\n\n### Flow\nIf you want to have access to Flow typed components, include `SideMenu.js` from dist folder when installing via npm.\n\n## Styling!!!\n To use default styling include `side-menu.css`  to your project. You can find it in dist folder when installing via `npm`. For an idea on how to customize styling see [Demo](https://fortunar.github.io/react-sidemenu/).\n## Demo \u0026 Examples\n[Demo](https://fortunar.github.io/react-sidemenu/) showcasing the functionalities \u0026 code examples. In the examples we use Font Awesome icons (from a CDN).\n\nYou can run examples by yourself. Clone the repo and do:\n\n    npm install\n    npm start\n\nThe examples are run using Webpack development server. \n\n## Options\n\n`\u003cSideMenu\u003e` - main component\n\n|**Option**|**Default**|**Description**|\n| --- | --- | --- |\n| items | null | Property for the JS Object configuration of the component SideMenu component. Check out [Demo](https://fortunar.github.io/react-sidemenu/) to find out how it works. |\n| activeItem | null | Preset starting active item. Also used for opening and closing menu items from code (e.g. from a button). When using this option, make sure to **always** keep the controlling variable (e.g. variable in state) from the parent component of the menu in sync with the actual activeItem (i.e. override onMenuItemClick and update the variable) |\n| collapse | true | This property gives you the capability to enable or disable collapsing menu when other elements of the menu are clicked. |\n| theme | 'default' | This sets a class for the component that you can use to apply custom styling. The class will be Side-menu-[theme_name]. **Note:** our default theme uses Font Awesome icons. See [Demo](https://fortunar.github.io/react-sidemenu/) for an detailed example.  |\n| renderMenuItemContent({ icon: icon, value: value, label: label }) | null | This property enables you to provide a custom render method for items. Function is passed one parameter, representing the menu item being rendered. It receives an object with attributes: icon, label and value. [Demo](https://fortunar.github.io/react-sidemenu/)|\n| onMenuItemClick | `(value, extras) =\u003e window.location.href = '#' + value` | This property enables you to provide custom onClick method for items. The function gets passed the value of the clicked item and item extras (object). [Demo](https://fortunar.github.io/react-sidemenu/)|\n| rtl | false | This property enables you to use the sidemenu in a right-to-left page. [Demo](https://fortunar.github.io/react-sidemenu/)|\n| shouldTriggerClickOnParents | false | This property enables triggering 'onMenuItemClick' on parent items that have children. |\n\n`\u003cItem\u003e` - this component is for the non-JS object config of the menu\n\n|**Option**|**Description**|\n| --- | --- |\n| value | The href where you will be redirected after you click the item if no `onMenuItemClick` is provided. If `onMenuItemClick` is provided, it is the value being passed to the function call. |\n| label | Just a label. |\n| icon | This is the icon of the item. It should be a [font-awesome](http://fontawesome.io/) class name.\n| onClick | Custom on click method specific for this item (overrides onMenuItemClick).\n| extras | Optional container for additional data.\n\n## Roadmap\n\nAny contribution is welcome.\n\nTODO:\n - split code into two units: JS object configuration and Component configuration\n - tests \u0026 CI support\n - refactor examples code\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffortunar%2Freact-sidemenu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffortunar%2Freact-sidemenu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffortunar%2Freact-sidemenu/lists"}