https://github.com/9inpachi/react-circular-menu
A minimal circle menu component for React.
https://github.com/9inpachi/react-circular-menu
component react typescript
Last synced: about 1 year ago
JSON representation
A minimal circle menu component for React.
- Host: GitHub
- URL: https://github.com/9inpachi/react-circular-menu
- Owner: 9inpachi
- License: apache-2.0
- Created: 2020-09-26T09:02:52.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2025-03-16T05:35:57.000Z (over 1 year ago)
- Last Synced: 2025-03-30T06:04:56.459Z (over 1 year ago)
- Topics: component, react, typescript
- Language: TypeScript
- Homepage: https://9inpachi.github.io/react-circular-menu
- Size: 2.67 MB
- Stars: 42
- Watchers: 2
- Forks: 16
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Circular Menu
[](https://www.npmjs.com/package/react-circular-menu)
[](https://www.npmjs.com/package/react-circular-menu)
Circle based menu component for React with custom angle range and any number of menu items.
Demo: [https://9inpachi.github.io/react-circular-menu](https://9inpachi.github.io/react-circular-menu)
## Table of Contents
- [Setup](#setup)
- [Example](#example)
- [Props](#props)
- [CircleMenu](#circlemenu)
- [CircleMenuItem](#circlemenuitem)
## Setup
Install the npm package.
```bash
npm install react-circular-menu
# or
yarn add react-circular-menu
```
Install external dependency `styled-components` if you don't already have it.
```bash
npm install styled-components
# or
yarn add styled-components
```
## Example
```jsx
import MailIcon from "@material-ui/icons/Mail";
import HelpOutlineIcon from "@material-ui/icons/HelpOutline";
import MapIcon from "@material-ui/icons/Map";
// Import the circular menu
import {
CircleMenu,
CircleMenuItem,
TooltipPlacement,
} from "react-circular-menu";
export const TestMenuComponent = (props) => {
return (
alert("Clicked the item")}
tooltip="Email"
tooltipPlacement={TooltipPlacement.Right}
>
);
};
```
## Props
All angles are in degrees.
- [CircleMenu](#circlemenu)
- [CircleMenuItem](#circlemenuitem)
### CircleMenu
- [`startAngle: number`](#startangle-number)
- [`rotationAngle: number`](#rotationangle-number)
- [`rotationAngleInclusive?: boolean`](#rotationangleinclusive-boolean)
- [`radius?: number`](#radius-number)
- [`itemSize?: number`](#itemsize-number)
- [`className?: string`](#classname-string)
- [`menuToggleElement?: ReactElement`](#menutoggleelement-reactelement)
- [`menuToggleClassName?: string`](#menutoggleclassname-string)
- [`onMenuToggle?: (menuActive: boolean) => void`](#onmenutoggle-menuactive-boolean--void)
- [`open?: boolean`](#open-boolean)
- [`children: ReactNode`](#children-reactnode)
#### `startAngle: number`
The angle at which the circle menu starts. That is, the angle at which the first item exists.
Example: `-90`
#### `rotationAngle: number`
The angle by which the menu is to be rotated. For example, 360 for a complete circle.
Example: `270`
#### `rotationAngleInclusive?: boolean`
Whether 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.
Example: `false`
#### `radius?: number`
Radius of the circle (in em).
Example: `5`
#### `itemSize?: number`
Size of the menu toggle and menu items (in em).
Example: `2`
#### `className?: string`
Class name to apply custom styles to circle menu wrapper.
Example: `testClass`
#### `menuToggleElement?: ReactElement`
Custom element for the menu toggle.
**NOTE: The element must have an `onClick` prop. The prop doesn't need to be specified but it should exist.**
Example: `Toggle Menu`
#### `menuToggleClassName?: string`
Class name to apply custom styles to circle menu toggle.
Example: `testClass`
#### `onMenuToggle?: (menuActive: boolean) => void`
Callback called on toggling the menu.
Example:
```js
(menuActive) => console.log(menuActive);
```
#### `open?: boolean`
Whether the menu is open or not. This can be used to control the menu's toggle state from the parent component.
Example: `false`
#### `children: ReactNode`
Children of the menu.
### CircleMenuItem
- [`size?: number`](#size-number)
- [`link?: string`](#link-string)
- [`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)
- [`target?: string`](#target-string)
- [`className?: string`](#classname-string-1)
- [`style?: CSSProperties`](#style-cssproperties)
- [`onClick?: (event: MouseEvent) => void`](#onclick-event-mouseevent--void)
- [`radius?: number`](#radius-number-1)
- [`menuActive?: boolean`](#menuactive-boolean)
- [`children: ReactNode`](#children-reactnode-1)
#### `size?: number`
Size of the menu item. Set by `itemSize` of `CircleMenu` component.
Example: `2`
#### `link?: string`
Link to point to a URL.
Example: `https://google.com`
#### `tooltipPlacement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top'`
Placement position of the menu item tooltip.
Example: `top`
#### `target?: string`
The `target` attribute of anchor tag (``) if link prop is set.
Example: `_blank`
#### `className?: string`
Extra class name for applying custom styles.
Example: `testClass`
#### `style?: CSSProperties`
Extra inline styles for the component.
Example: `{ background: 'red' }`
#### `onClick?: (event: MouseEvent) => void`
Callback when the component is clicked.
Example:
```js
(event) => console.log("Clicked");
```
#### `radius?: number`
Radius of the menu item from the menu toggle. Set by `CircleMenu` component.
Example: `5`
#### `menuActive?: boolean`
Whether the menu and thus the menu item is active or not. Set by `CircleMenu` component.
Example: `true`
#### `rotationAngle?: number`
Rotation angle in degrees of the menu item from the `startAngle` of `CircleMenu`. Set by `CircleMenu` component.
Example: `90`
#### `children: ReactNode`
Children of the menu.