React Pie Menu

A configurable radial menu for React.

Install

Recommended: React and React-DOM 17.x

npm install --save styled-components react-pie-menu
# or
yarn add styled-components react-pie-menu

Examples

There are several demos. Also check out their sources. Here is one to get you started:

import React from 'react';
import PieMenu, { Slice } from 'react-pie-menu';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

export default ({ x, y }) => (
  <PieMenu 
    radius="125px"
    centerRadius="30px"
    centerX={x}
    centerY={y}
  >
    {/* Contents */}
    <Slice><FontAwesomeIcon icon="home" size="2x" /></Slice>
    <Slice onSelect={() => window.open('https://www.facebook.com', '_blank')}>
      <FontAwesomeIcon icon="facebook-f" size="2x" />
    </Slice>
    <Slice onSelect={() => window.open('https://www.twitter.com', '_blank')}>
      <FontAwesomeIcon icon="twitter" size="2x" />
    </Slice>
    <Slice onSelect={() => window.open('https://www.linkedin.com', '_blank')}>
      <FontAwesomeIcon icon="linkedin-in" size="2x" />
    </Slice>
    <Slice onSelect={() => window.open('https://github.com/psychobolt/react-pie-menu', '_blank')}>
      <FontAwesomeIcon icon="github" size="2x" />
    </Slice>
    <Slice onSelect={() => window.open('https://en.wikipedia.org/wiki/RSS', '_blank')}>
      <FontAwesomeIcon icon="rss" size="2x" />
    </Slice>
    <Slice onSelect={() => window.open('https://www.pinterest.com/', '_blank')}>
      <FontAwesomeIcon icon="pintrest" size="2x" />
    </Slice>
    <Slice><FontAwesomeIcon icon="asterisk" size="2x" /></Slice>
  </PieMenu>
);

The code will display a 125 pixel radial menu with 8 slices and a 30 pixel radial center. Each slice is configured to open a url when selected.

Components

For configuration of Components, see bellow.

PieMenu

Inner elements:

<div class="container" centerX centerY radius {..attrs}>
  <ul class="list" radius>
    <li class="item" startAngle endAngle skew centralAngle></li>
    ...p
  </ul>
  <Center centerRadius={centerRadius} />
</div>

Props

radius?: string

Defines pie menu's radius in CSS Unit. For example, 150px. `

centerX?: string

Defines the position of the pie menu in CSS Unit. For example, 0px will be left-most position of its parent container.

centerY?: string

Defines the position of the pie menu in CSS Unit. For example, 0px will be the top-most position of its parent container.

centerRadius?: string

Defines the center radius. For example, 30px or 0 (no center). This prop is forwarded to the Center Component.

startOffsetAngle?: number

Offsets the starting slice. By default, the first slice's tip is facing north position (0 degrees).

Center?: React.ComponentType<T>

You can provide your own React Component to be the Center (by default PieCenter). You may also import PieCenter as a Component.

attrs?: {}

You can add custom attributes by specifying in attrs. For example, { resize: 'false' }.

PieCenter

You can define your own center by importing the Component. For example:

import { PieCenter } from 'react-pie-menu';

export default (props) => (
  <PieMenu centerRadius={props.centerRadius || '30px'}>
    { /* my content */}
  </PieMenu>
);

Props

centerRadius?: string

Same as Pie Menu. If you define your own center, you can specify your own value instead.

Slice

Inner elements:

<div class="container" radius centralAngle centralRadius contentHeight {..attrs}>
  <div class="content-container">
    <div class="content">{children}</div>
  </div>
</div>

Props

contentHeight?: string

Height of the content in CSS Size. This prop is used to center the content between top and bottom of the slice. For example, 2em.

onMouseUp?: (e: SyntheticMouseEvent<T>) => void

Callback when mouse up event is triggered.

onMouseOver?: (e: SyntheticMouseEvent<T>) => void

Callback when mouse over event is triggerd

onSelect: (e: SyntehticMouseEvent<T>) => void

Callback when slice is selected. This event is chained from a mouse up event.

attrs: {}

You can add custom attributes by specifying in attrs. For example, { enabled: 'true' }.

Contexts

PieMenu supplies context props for child elements.

propTypes

By default the Slice Component inherits properties from PieMenu globally:

radius: string

PieMenu's radius

centerRadius: string

PieCenter's center radius

centralAngle: number

Computed angle for every slice (360 / # number of slices). Calculated internally.

polar: boolean

If true, the library detects that there is at most 2 slices.

itemTypes

Additionally, the Slice Component inherits calculated local properties from PieMenu:

startAngle: number

Uniform offset angle.

endAngle: number

Target location angle

skew: number

Number to skew the rectangle container which adjusts tip angle of the slice (e.g. 90 - centralAngle). This is a CSS trick. See references, for details.

Styling

Using Style Props

You can use props to provide style values. React Pie Menu uses, as well as extends Styled System. See below for available props:

PieMenu

None

Slice

Category	Props
Text Color	color, textHighlight
Background Color	backgroundColor, bg, highlight

Using Custom Theme CSS

Style Pie Menu Components with styled-component's ThemeProvder.

import React from 'react';
import { ThemeProvder, css } from 'styled-components';

import MyCustomPie from './MyCustomPie';

const theme = {
  pieMenu: {
    container: css`
      // style color...
    `,
    list: css`
      // set pie size...
    `,
    item: css`
      // rotate slice...
    `,
    center: css`
      // style color...
    `;
  },
  slice: {
    container: css`
      // style color...
    `,
    contentContainer: css`
      // center content...
    `,
    content: css`
      // rotate content...
    `,
  }
}

export default () => (
  <ThemeProvider theme={theme}>
    <MyCustomPie />
  </ThemeProvider>
);

Style Functions

background

For coloring a slice's background

// ./Slice.style.js
import { background } from 'react-pie-menu';
import { css } from 'styled-components';

export const slice = css`
  ${background('#ff0000')}
  /* or interpolate from colors scale in a theme */
  ${background('red.100')}
  ${background('tomato')}
`;

Refer to default styles from source files:

• PieMenu & PieCenter
• Slice

Notable Change Notes

• (Coming soon) v0.2.6 introduce the ability to use style props.
• v0.2.0 deprecated inline css styles in favor of CSS-in-JS.
• For older docs, refer to the v0.1.x tree.

Reference

• https://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/
• https://stackoverflow.com/questions/14184494/segments-in-a-circle-using-css3
• https://jamesrwilliams.ca/posts/css-wheel-of-fortune