use-scroller

use-scroller

콘텐츠의 가로 스크롤을 관리하는 훅이에요. 스크롤 버튼, 드래그 스크롤, 스크롤 가능 상태를 제공해요.

출처: 문서

본문

사용법 (Usage)

useScroller 훅은 스크롤 가능한 컨테이너의 방향으로 스크롤하는 함수를 제공해요. scrollAmount 옵션으로 각 스크롤의 픽셀 양을 설정할 수 있어요.

import { Box, Button, Group, Text } from '@mantine/core';
import { useScroller } from '@mantine/hooks';

function Demo() {
  const scroller = useScroller({ scrollAmount: 400 });

  return (

            ← Scroll left

            Scroll right →

        scrollAmount: 400px

          {Array.from({ length: 20 }).map((_, index) => (

              {index + 1}

          ))}

  );
}

드래그 (Draggable)

드래그로 스크롤하는 기능을 켜거나 끄려면 draggable 옵션을 사용해요. draggable이 true(기본값)이면 사용자는 콘텐츠를 클릭하고 끌어서 스크롤할 수 있어요.

import { Box, Button, Group, Text } from '@mantine/core';
import { useScroller } from '@mantine/hooks';

function Demo() {
  const scroller = useScroller({ draggable: false });

  return (

            ← Scroll left

            Scroll right →

        draggable: false

          {Array.from({ length: 20 }).map((_, index) => (

              {index + 1}

          ))}

  );
}

Scroller 컴포넌트 (Scroller component)

컴포넌트 API를 선호한다면 Scroller 컴포넌트를 사용할 수 있어요. 동일한 기능에 추가 스타일링과 컨트롤 버튼 기능을 제공해요.

import { Badge, Group, Scroller } from '@mantine/core';

function Demo() {
  return (

        {Array.from({ length: 20 }).map((_, index) => (

            Badge {index + 1}

        ))}

  );
}

정의 (Definition)

function useScroller(
  options?: UseScrollerOptions
): UseScrollerReturnValue;

interface UseScrollerOptions {
  /** Amount of pixels to scroll when calling scroll functions, `200` by default */
  scrollAmount?: number;

  /** Determines whether content can be scrolled by dragging with mouse, `true` by default */
  draggable?: boolean;

  /** Called when scroll state changes (canScrollStart or canScrollEnd) */
  onScrollStateChange?: (state: UseScrollerScrollState) => void;
}

interface UseScrollerScrollState {
  /** Whether content can be scrolled towards the start (left in LTR, right in RTL) */
  canScrollStart: boolean;

  /** Whether content can be scrolled towards the end (right in LTR, left in RTL) */
  canScrollEnd: boolean;
}

interface UseScrollerReturnValue {
  /** Ref callback to attach to the scrollable container element */
  ref: RefCallback;

  /** Whether content can be scrolled towards the start */
  canScrollStart: boolean;

  /** Whether content can be scrolled towards the end */
  canScrollEnd: boolean;

  /** Scrolls towards the start direction */
  scrollStart: () => void;

  /** Scrolls towards the end direction */
  scrollEnd: () => void;

  /** `true` if the user is currently dragging the content */
  isDragging: boolean;

  /** Props to spread on the scrollable container for drag functionality */
  dragHandlers: {
    onMouseDown: (e: React.MouseEvent) => void;
    onMouseMove: (e: React.MouseEvent) => void;
    onMouseUp: () => void;
    onMouseLeave: () => void;
  };
}

내보내는 타입 (Exported types)

UseScrollerOptions, UseScrollerReturnValue, UseScrollerScrollState 타입은 @mantine/hooks 패키지에서 내보내져요. 애플리케이션에서 임포트할 수 있어요.

import type {
  UseScrollerOptions,
  UseScrollerReturnValue,
  UseScrollerScrollState,
} from '@mantine/hooks';

더 알아보기 (Learn more)

• use-scroll-spy
• use-splitter