Mantine hooks

Mantine hooks (@mantine/hooks)

@mantine/hooks 패키지는 커스텀 컴포넌트를 만들기 위한 70개 이상의 훅을 제공해요. @mantine/hooks 패키지는 대부분의 다른 @mantine/* 패키지 내부에서 사용되며, Mantine 컴포넌트를 사용하려면 프로젝트에 설치해야 해요.

출처: 문서

본문

설치

yarn add @mantine/hooks

사용법

@mantine/hooks 패키지는 어떤 웹 React 애플리케이션에서든 사용할 수 있고, 상태 관리 훅(use-pagination, use-queue 같은)은 React Native와도 호환돼요. 이 패키지는 Mantine 컴포넌트나 다른 Mantine 라이브러리를 쓰지 않아도 사용할 수 있어요. 독립 실행이 가능하고 React 외의 의존성은 없어요.

use-move 훅으로 커스텀 슬라이더를 만드는 예시:

import { useState } from 'react';
import { DotsSixVerticalIcon } from '@phosphor-icons/react';
import { clamp, useMove } from '@mantine/hooks';
import classes from './Demo.module.css';

function Demo() {
  const [value, setValue] = useState(0.3);
  const { ref } = useMove(({ x }) => setValue(clamp(x, 0.1, 0.9)));
  const labelFloating = value < 0.2 || value > 0.8;

  return (
    <div className={classes.root}>
      <div className={classes.track} ref={ref}>
        <div
          className={classes.filled}
          style={{
            width: `calc(${value * 100}% - var(--thumb-width) / 2 - var(--thumb-offset) / 2)`,
          }}
        >
          <span className={classes.label} data-floating={labelFloating || undefined} data-filled>
            {(value * 100).toFixed(0)}
          </span>
        </div>

        <div
          className={classes.empty}
          style={{
            width: `calc(${(1 - value) * 100}% - var(--thumb-width) / 2 - var(--thumb-offset) / 2)`,
          }}
        >
          <span className={classes.label} data-floating={labelFloating || undefined}>
            {((1 - value) * 100).toFixed(0)}
          </span>
        </div>

        <div
          className={classes.thumb}
          style={{ left: `calc(${value * 100}% - var(--thumb-width) / 2)` }}
        >
          <DotsSixVerticalIcon />
        </div>
      </div>
    </div>
  );
}

라이선스

MIT

더 알아보기 (Learn more)