react-wheel-menu

React components & hooks for building a radial wheel menu.

Installation

npm install --save react-wheel-menu

Showcase

Counter-Strike Demo · Code	Overwatch Demo · Code	Grand Theft Auto Demo · Code
League of Legends Demo · Code	Genshin Impact Demo · Code

Example

import type { CSSProperties } from 'react';
import {
    Label,
    Layout,
    Segment,
    Wheel
} from 'react-wheel-menu';
import 'react-wheel-menu/index.css';

export function Example() {
    const red: CSSProperties = { backgroundColor: 'red', color: 'white' };
    const yellow: CSSProperties = { backgroundColor: 'yellow', color: 'black' };
    const green: CSSProperties = { backgroundColor: 'green', color: 'white' };
    const blue: CSSProperties = { backgroundColor: 'blue', color: 'white' };

    function onClickBlue(event: MouseEvent<HTMLButtonElement>) {
        console.log('Clicked blue', event);
    }

    return (
        <Wheel style={{ width: 300, height: 300 }}>
            <Segment from={315} to={45} style={red}>
                <Layout>
                    <Label>Red</Label>
                </Layout>
            </Segment>

            <Segment from="45deg" to="37.5%" style={yellow}>
                <Layout direction="vertical" justify="start">
                    <Label orient="outwards" offset={-30}>Start</Label>
                </Layout>

                <Layout direction="horizontal" justify="center">
                    <Label orient="upwards" offset={-10}>Up</Label>
                    <Label orient="downwards" offset={-10}>Down</Label>
                </Layout>

                <Layout direction="vertical" justify="end">
                    <Label orient="inwards" offset={10}>End</Label>
                </Layout>
            </Segment>

            <Segment from="37.5%" to="3.92699rad" style={blue} as="button" onClick={onClickBlue}>
                <Layout>
                    <Label>Blue</Label>
                </Layout>
            </Segment>

            <Segment from="3.92699rad" to="0.875turn" style={green} as="a" href="https://example.com" target="_blank">
                <Layout>
                    <Label>Green</Label>
                </Layout>
            </Segment>
        </Wheel>
    );
}

Components

<Segment>

A <Segment> must specify the angle it starts from and spans to, for example:

• A right-angled segment in degrees:
  • <Segment from={0} to={90} />
• An acute-angled segment in radians:
  • <Segment from="1rad" to="2rad" />
• An obtuse-angled segment in gradians:
  • <Segment from="100grad" to="210grad" />
• A right-angled segment in turns:
  • <Segment from="0.5turn" to="0.75turn" />
• An obtuse-angled segment in percentages:
  • <Segment from="50%" to="85%" />

<Spoke>

A <Spoke> is a straight line radiating from the centre of the <Wheel>.

Spokes can be used to visually split segments, for example:

<Wheel style={{ width: 300, height: 300 }}>
    <Segment from="0deg" to="45deg" style={{ background: 'red' }} />
    <Segment from="45deg" to="90deg" style={{ background: 'blue' }} />
    <Spoke angle="45deg" style={{ background: 'white', height: '100px' }} />
</Wheel>

<Layout>

A <Layout> controls the distribution and orientation of <Label>s inside a <Segment> or <Spoke>.

In the <Layout> below, the <Label> is positioned at the edge of the segment with the text facing inwards to the center of the wheel.

<Wheel style={{ width: 300, height: 300 }}>
    <Segment from={0} to={90}>
        <Layout direction="vertical" justify="end">
            <Label orient="inwards">Inwards Label</Label>
        </Layout>
    </Segment>

    <Spoke angle="45deg" style={{ width: '10px' }}>
        <Layout direction="vertical">
            <Label orient="inwards">Outwards Label</Label>
        </Layout>
    </Spoke>
</Wheel>

Contributing

Bug reports and pull requests are welcome on GitHub.

License

This project is available under the terms of the ISC license. See the LICENSE file for the copyright information and licensing terms.