React Pie Menu

A configurable radial menu for React.

This README is for the next release 0.3.x. Please see 0.2.x.

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 {...attrs}>
  <ul class="list" radius>
    <li class="item">{slice}</li>
    ...
  </ul>
  <PieCenter 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" contentHeight _highlight {...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.

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

Callback when mouse enter event is triggered.

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

Callback when mouse over event is triggered.

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' }.

_highlight: boolean

Provided by PieMenu when a user input/touch hover a Slice. If true, by default the slice will be highlighted.

Theme Context

PieMenu supplies contextual values for child elements in the theme's context object. e.g.

import React from 'react';
import { ThemeContext } from 'styled-components';

import Content from './Content.component';

export default props => {
  const { context } = React.useContext(ThemeContext);
  /* returns e.g.
    context = {
      radius,
      centerRadius,
      ...      
    };
  */
  return <Content {...props} {...context} />
};

Context Props

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.

Item's Context

startAngle: number

Uniform offset angle for the current Slice.

endAngle: number

Target location angle for the current Slice.

skew: number

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

active: boolean

If true, the current Slice is active from mouse/touch over.

Styling

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>
);

Refer to default styles from source files:

• PieMenu & PieCenter
• Slice

Utils

Style Functions

Useful functions for styling.

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')}
`;

Context Selectors

import { endAngle } from 'react-pie-menu';
import { css } from 'styled-components';

export const content = css`
  transform: rotate(-${endAngle}deg);
`;

See available selectors:

• PieMenu
• Slice

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	Supported Props	Added Props
Text Color	color	textHighlight
Background Color	backgroundColor, bg	highlight

Usage:

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

export default props => <Slice {...props} backgroundColor="red" />

Notable Change Notes

• v0.3.0 introduce the ability to use style props, context props, touch device, and React 17 support.
• v0.2.0 deprecated inline css styles in favor of CSS-in-JS.

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