useFocusTrap

useFocusTrap (포커스 트랩)

useFocusTrap 훅은 요소 안에서 포커스를 가두기 위해 사용하는 ref를 반환해요. 포커스가 요소 밖으로 벗어나지 않게 해요.

출처: 문서

본문

이 훅은 요소에 전달해야 하는 ref를 반환해요.

import { Paper } from '@mantine/core';
import { useFocusTrap } from '@mantine/hooks';

function Demo() {
  const focusTrapRef = useFocusTrap();

  return (
    <>
      {/* With regular element: */}
      <div ref={focusTrapRef}>...</div>

      {/* With Mantine component: */}
      <Paper ref={focusTrapRef}>...</Paper>
    </>
  );
}

다른 ref 기반 훅과 결합하기 (Combine with other ref based hooks)

useFocusTrap을 다른 ref 기반 훅과 결합하려면 useMergedRef 훅을 사용해요.

import { useRef } from 'react';
import {
  useClickOutside,
  useFocusTrap,
  useMergedRef,
} from '@mantine/hooks';

function Demo() {
  const myRef = useRef();
  const useClickOutsideRef = useClickOutside(() => {});
  const focusTrapRef = useFocusTrap();
  const mergedRef = useMergedRef(
    myRef,
    useClickOutsideRef,
    focusTrapRef
  );

  return <div ref={mergedRef}>...</div>;
}

초기 포커스 (Initial focus)

기본적으로 포커스 트랩은 첫 번째 상호작용 가능한 요소로 포커스를 이동해요. 초기 포커스를 받을 요소를 지정하려면 data-autofocus 속성을 추가하세요.

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

function Demo() {
  const focusTrapRef = useFocusTrap();

  return (
    <div ref={focusTrapRef}>
      <input />
      <input data-autofocus /> {/* The second input in the modal will have initial focus */}
    </div>
  );
}

정의 (Definition)

function useFocusTrap(active?: boolean): React.RefCallback

더 알아보기 (Learn more)