use-radial-move

Handles radial move behavior over given element, can be used to build custom radial sliders

Source

Docs

Package

Usage

use-radial-move hook can be used to create custom radial sliders, for example AngleSlider component is based on this hook. It works similar to use-move hook.

Example of creating custom radial slider:

115°

import { useState } from 'react';
import { Box } from '@mantine/core';
import { useRadialMove } from '@mantine/hooks';
import classes from './Demo.module.css';

function Demo() {
  const [value, setValue] = useState(115);
  const { ref } = useRadialMove(setValue);

  return (
    <Box className={classes.root} ref={ref} style={{ '--angle': `${value}deg` }}>
      <div className={classes.value}>{value}°</div>
      <div className={classes.thumb} />
    </Box>
  );
}

Hook options

use-radial-move hook accepts 2 arguments:

A callback function that is called when the value changes
An option object described below

export interface UseRadialMoveOptions {
  /** Number by which value is incremented/decremented with mouse and touch events, `0.01` by default */
  step?: number;

  /** Called in `onMouseUp` and `onTouchEnd` events with the current value */
  onChangeEnd?: (value: number) => void;

  /** Called in `onMouseDown` and `onTouchStart` events */
  onScrubStart?: () => void;

  /** Called in `onMouseUp` and `onTouchEnd` events */
  onScrubEnd?: () => void;
}

Definition

function useRadialMove<T extends HTMLElement = HTMLDivElement>(
  onChange: (value: number) => void,
  options?: UseRadialMoveOptions
): {
  ref: React.RefObject<T>;
  active: boolean;
};

use-orientation

use-reduced-motion