use-disclosure

use-disclosure

boolean state를 관리하고 open, close, toggle 핸들러를 제공하는 use-disclosure 훅에 대해 설명해 드릴게요. 보통 모달, 드로어, 팝오버와 함께 사용돼요. @mantine/hooks 패키지에서 제공돼요.

출처: 문서

본문

사용법

use-disclosure 훅은 boolean state를 관리해요. open, close, toggle, set 핸들러를 제공하고 선택적 onOpen과 onClose 콜백을 받아요. 제어 모달, 팝오버, 다른 비슷한 컴포넌트를 관리하는 데 사용할 수 있어요:

import { useDisclosure } from '@mantine/hooks';

function Demo() {
  const [opened, handlers] = useDisclosure(false);

  // Sets opened to true
  handlers.open();

  // Sets opened to false
  handlers.close();

  // Sets opened to true if it was false and vice versa
  handlers.toggle();

  // Sets opened to the given value
  handlers.set(true);
}

콜백

onOpen과 onClose 콜백은 opened state가 변경될 때 실행돼요:

import { useDisclosure } from '@mantine/hooks';

function Demo() {
  const [opened, handlers] = useDisclosure(false, {
    onOpen: () => console.log('Opened'),
    onClose: () => console.log('Closed'),
  });

  // Calls `onOpen` callback and sets opened to true
  handlers.open();

  // Does nothing, opened is already true
  handlers.open();

  // Calls `onClose` callback and sets opened to false
  handlers.close();

  // Does nothing, opened is already false
  handlers.close();

  // Calls `onOpen` or `onClose` depending on the current state
  handlers.toggle();
}

정의

interface UseDisclosureOptions {
  onOpen?: () => void;
  onClose?: () => void;
}

interface UseDisclosureHandlers {
  set: (value: boolean) => void;
  open: () => void;
  close: () => void;
  toggle: () => void;
}

type UseDisclosureReturnValue = [boolean, UseDisclosureHandlers];

function useDisclosure(
  initialState?: boolean,
  options?: UseDisclosureOptions,
): UseDisclosureReturnValue

내보내는 타입

UseDisclosureOptions, UseDisclosureHandlers, UseDisclosureReturnValue 타입은 @mantine/hooks 패키지에서 내보내지므로 애플리케이션에서 import할 수 있어요:

import type { UseDisclosureOptions, UseDisclosureHandlers, UseDisclosureReturnValue } from '@mantine/hooks';

더 알아보기 (Learn more)