Skip to content

9inpachi/react-circular-menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Circular Menu

Version Downloads

Circle based menu component for React with custom angle range and any number of menu items.

Demo: https://9inpachi.github.io/react-circular-menu

React Circular Menu

Table of Contents

Setup

Install the npm package.

npm install react-circular-menu
# or
yarn add react-circular-menu

Install external dependency styled-components if you don't already have it.

npm install styled-components
# or
yarn add styled-components

Example

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 (
    <CircleMenu
      startAngle={-90}
      rotationAngle={360}
      itemSize={2}
      radius={5}
      /**
       * rotationAngleInclusive (default true)
       * Whether to include the ending angle in rotation because an
       * item at 360deg is the same as an item at 0deg if inclusive.
       * Leave this prop for angles other than 360deg unless otherwise desired.
       */
      rotationAngleInclusive={false}
    >
      <CircleMenuItem
        onClick={() => alert("Clicked the item")}
        tooltip="Email"
        tooltipPlacement={TooltipPlacement.Right}
      >
        <MailIcon />
      </CircleMenuItem>
      <CircleMenuItem tooltip="Help">
        <HelpOutlineIcon />
      </CircleMenuItem>
      <CircleMenuItem tooltip="Location">
        <MapIcon />
      </CircleMenuItem>
      <CircleMenuItem tooltip="Info">
        <InfoIcon />
      </CircleMenuItem>
    </CircleMenu>
  );
};

Props

All angles are in degrees.

CircleMenu

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: <button>Toggle Menu</button>

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:

(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 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 (<a target="_blank"></a>) 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:

(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.