use-radial-move
use-radial-move
주어진 엘리먼트 위에서 방사형(radial) 이동 동작을 처리하는 훅이에요. 커스텀 방사형 슬라이더를 만드는 데 사용할 수 있어요.
출처: 문서
본문
사용법 (Usage)
use-radial-move 훅은 커스텀 방사형 슬라이더를 만드는 데 사용할 수 있어요. 예를 들어 AngleSlider 컴포넌트가 이 훅을 기반으로 해요. use-move 훅과 비슷하게 동작해요.
커스텀 방사형 슬라이더를 만드는 예시를 보여 드릴게요.
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 (
{value}°
);
}
정의 (Definition)
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;
}
interface UseRadialMoveReturnValue {
/** Ref to be passed to the element that should be used for radial move */
ref: React.RefCallback;
/** Indicates whether the radial move is active */
active: boolean;
}
function useRadialMove(
onChange: (value: number) => void,
options?: UseRadialMoveOptions,
): UseRadialMoveReturnValue;
내보내는 타입 (Exported types)
UseRadialMoveOptions와 UseRadialMoveReturnValue 타입은 @mantine/hooks 패키지에서 내보내져요. 애플리케이션에서 임포트할 수 있어요.
import type { UseRadialMoveOptions, UseRadialMoveReturnValue } from '@mantine/hooks';