{"id":25381795,"url":"https://github.com/9inpachi/react-circular-menu","last_synced_at":"2025-04-06T07:12:45.645Z","repository":{"id":43175337,"uuid":"298776417","full_name":"9inpachi/react-circular-menu","owner":"9inpachi","description":"A minimal circle menu component for React.","archived":false,"fork":false,"pushed_at":"2025-03-16T05:35:57.000Z","size":2796,"stargazers_count":42,"open_issues_count":0,"forks_count":16,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T06:04:56.459Z","etag":null,"topics":["component","react","typescript"],"latest_commit_sha":null,"homepage":"https://9inpachi.github.io/react-circular-menu","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/9inpachi.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-26T09:02:52.000Z","updated_at":"2025-03-16T05:34:32.000Z","dependencies_parsed_at":"2024-08-25T21:29:24.925Z","dependency_job_id":"7e84b57c-801f-40ba-89c6-40200ad46fc9","html_url":"https://github.com/9inpachi/react-circular-menu","commit_stats":{"total_commits":85,"total_committers":1,"mean_commits":85.0,"dds":0.0,"last_synced_commit":"3348d7c8b80643eef53ee02965362ac5ca945d68"},"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9inpachi%2Freact-circular-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9inpachi%2Freact-circular-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9inpachi%2Freact-circular-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9inpachi%2Freact-circular-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/9inpachi","download_url":"https://codeload.github.com/9inpachi/react-circular-menu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445671,"owners_count":20939958,"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":["component","react","typescript"],"created_at":"2025-02-15T06:33:31.962Z","updated_at":"2025-04-06T07:12:45.617Z","avatar_url":"https://github.com/9inpachi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Circular Menu\n\n[![Version](https://img.shields.io/npm/v/react-circular-menu.svg)](https://www.npmjs.com/package/react-circular-menu)\n[![Downloads](https://img.shields.io/npm/dt/react-circular-menu.svg)](https://www.npmjs.com/package/react-circular-menu)\n\nCircle based menu component for React with custom angle range and any number of menu items.\n\nDemo: [https://9inpachi.github.io/react-circular-menu](https://9inpachi.github.io/react-circular-menu)\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg alt=\"React Circular Menu\" title=\"React Circular Menu Example\" src=\"https://user-images.githubusercontent.com/36920441/158416612-b9765cd1-334b-4d45-8d12-b64aa1c759de.gif\"\u003e\n\u003c/div\u003e\n\n## Table of Contents\n\n- [Setup](#setup)\n- [Example](#example)\n- [Props](#props)\n  - [CircleMenu](#circlemenu)\n  - [CircleMenuItem](#circlemenuitem)\n\n## Setup\n\nInstall the npm package.\n\n```bash\nnpm install react-circular-menu\n# or\nyarn add react-circular-menu\n```\n\nInstall external dependency `styled-components` if you don't already have it.\n\n```bash\nnpm install styled-components\n# or\nyarn add styled-components\n```\n\n## Example\n\n```jsx\nimport MailIcon from \"@material-ui/icons/Mail\";\nimport HelpOutlineIcon from \"@material-ui/icons/HelpOutline\";\nimport MapIcon from \"@material-ui/icons/Map\";\n\n// Import the circular menu\nimport {\n  CircleMenu,\n  CircleMenuItem,\n  TooltipPlacement,\n} from \"react-circular-menu\";\n\nexport const TestMenuComponent = (props) =\u003e {\n  return (\n    \u003cCircleMenu\n      startAngle={-90}\n      rotationAngle={360}\n      itemSize={2}\n      radius={5}\n      /**\n       * rotationAngleInclusive (default true)\n       * Whether to include the ending angle in rotation because an\n       * item at 360deg is the same as an item at 0deg if inclusive.\n       * Leave this prop for angles other than 360deg unless otherwise desired.\n       */\n      rotationAngleInclusive={false}\n    \u003e\n      \u003cCircleMenuItem\n        onClick={() =\u003e alert(\"Clicked the item\")}\n        tooltip=\"Email\"\n        tooltipPlacement={TooltipPlacement.Right}\n      \u003e\n        \u003cMailIcon /\u003e\n      \u003c/CircleMenuItem\u003e\n      \u003cCircleMenuItem tooltip=\"Help\"\u003e\n        \u003cHelpOutlineIcon /\u003e\n      \u003c/CircleMenuItem\u003e\n      \u003cCircleMenuItem tooltip=\"Location\"\u003e\n        \u003cMapIcon /\u003e\n      \u003c/CircleMenuItem\u003e\n      \u003cCircleMenuItem tooltip=\"Info\"\u003e\n        \u003cInfoIcon /\u003e\n      \u003c/CircleMenuItem\u003e\n    \u003c/CircleMenu\u003e\n  );\n};\n```\n\n## Props\n\nAll angles are in degrees.\n\n- [CircleMenu](#circlemenu)\n- [CircleMenuItem](#circlemenuitem)\n\n### CircleMenu\n\n- [`startAngle: number`](#startangle-number)\n- [`rotationAngle: number`](#rotationangle-number)\n- [`rotationAngleInclusive?: boolean`](#rotationangleinclusive-boolean)\n- [`radius?: number`](#radius-number)\n- [`itemSize?: number`](#itemsize-number)\n- [`className?: string`](#classname-string)\n- [`menuToggleElement?: ReactElement`](#menutoggleelement-reactelement)\n- [`menuToggleClassName?: string`](#menutoggleclassname-string)\n- [`onMenuToggle?: (menuActive: boolean) =\u003e void`](#onmenutoggle-menuactive-boolean--void)\n- [`open?: boolean`](#open-boolean)\n- [`children: ReactNode`](#children-reactnode)\n\n#### `startAngle: number`\n\nThe angle at which the circle menu starts. That is, the angle at which the first item exists.\n\nExample: `-90`\n\n#### `rotationAngle: number`\n\nThe angle by which the menu is to be rotated. For example, 360 for a complete circle.\n\nExample: `270`\n\n#### `rotationAngleInclusive?: boolean`\n\nWhether to include the ending angle in rotation. Because an item at 360 degrees is the same as an item at 0 degree if inclusive. Leave this prop for angles other than 360 degrees unless otherwise desired.\n\nExample: `false`\n\n#### `radius?: number`\n\nRadius of the circle (in em).\n\nExample: `5`\n\n#### `itemSize?: number`\n\nSize of the menu toggle and menu items (in em).\n\nExample: `2`\n\n#### `className?: string`\n\nClass name to apply custom styles to circle menu wrapper.\n\nExample: `testClass`\n\n#### `menuToggleElement?: ReactElement`\n\nCustom element for the menu toggle.\n\n**NOTE: The element must have an `onClick` prop. The prop doesn't need to be specified but it should exist.**\n\nExample: `\u003cbutton\u003eToggle Menu\u003c/button\u003e`\n\n#### `menuToggleClassName?: string`\n\nClass name to apply custom styles to circle menu toggle.\n\nExample: `testClass`\n\n#### `onMenuToggle?: (menuActive: boolean) =\u003e void`\n\nCallback called on toggling the menu.\n\nExample:\n\n```js\n(menuActive) =\u003e console.log(menuActive);\n```\n\n#### `open?: boolean`\n\nWhether the menu is open or not. This can be used to control the menu's toggle state from the parent component.\n\nExample: `false`\n\n#### `children: ReactNode`\n\nChildren of the menu.\n\n### CircleMenuItem\n\n- [`size?: number`](#size-number)\n- [`link?: string`](#link-string)\n- [`tooltipPlacement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top'`](#tooltipplacement-bottom-end--bottom-start--bottom--left-end--left-start--left--right-end--right-start--right--top-end--top-start--top)\n- [`target?: string`](#target-string)\n- [`className?: string`](#classname-string-1)\n- [`style?: CSSProperties`](#style-cssproperties)\n- [`onClick?: (event: MouseEvent) =\u003e void`](#onclick-event-mouseevent--void)\n- [`radius?: number`](#radius-number-1)\n- [`menuActive?: boolean`](#menuactive-boolean)\n- [`children: ReactNode`](#children-reactnode-1)\n\n#### `size?: number`\n\nSize of the menu item. Set by `itemSize` of `CircleMenu` component.\n\nExample: `2`\n\n#### `link?: string`\n\nLink to point to a URL.\n\nExample: `https://google.com`\n\n#### `tooltipPlacement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top'`\n\nPlacement position of the menu item tooltip.\n\nExample: `top`\n\n#### `target?: string`\n\nThe `target` attribute of anchor tag (`\u003ca target=\"_blank\"\u003e\u003c/a\u003e`) if link prop is set.\n\nExample: `_blank`\n\n#### `className?: string`\n\nExtra class name for applying custom styles.\n\nExample: `testClass`\n\n#### `style?: CSSProperties`\n\nExtra inline styles for the component.\n\nExample: `{ background: 'red' }`\n\n#### `onClick?: (event: MouseEvent) =\u003e void`\n\nCallback when the component is clicked.\n\nExample:\n\n```js\n(event) =\u003e console.log(\"Clicked\");\n```\n\n#### `radius?: number`\n\nRadius of the menu item from the menu toggle. Set by `CircleMenu` component.\n\nExample: `5`\n\n#### `menuActive?: boolean`\n\nWhether the menu and thus the menu item is active or not. Set by `CircleMenu` component.\n\nExample: `true`\n\n#### `rotationAngle?: number`\n\nRotation angle in degrees of the menu item from the `startAngle` of `CircleMenu`. Set by `CircleMenu` component.\n\nExample: `90`\n\n#### `children: ReactNode`\n\nChildren of the menu.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F9inpachi%2Freact-circular-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F9inpachi%2Freact-circular-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F9inpachi%2Freact-circular-menu/lists"}