useFocusReturn

useFocusReturn (포커스 복귀)

useFocusReturn 훅은 포커스 트랩이 활성화될 때 저장한 마지막 활성 요소로 포커스를 되돌려줘요. 대부분 useFocusTrap과 함께 사용해요.

출처: 문서

본문

대부분의 경우 이 훅을 useFocusTrap과 함께 사용해야 해요.

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

useFocusReturn({
  // Is region with focus trap active?
  // When it activates hook saves document.activeElement to the internal state
  // and focuses this element once focus trap is deactivated
  opened: false,

  // Determines whether focus should be returned automatically, true by default
  shouldReturnFocus: true,
});

shouldReturnFocus 옵션을 false로 설정하면 반환된 함수를 호출해 마지막 활성 요소에 포커스를 줄 수 있어요.

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

const returnFocus = useFocusReturn({
  opened: false,
  shouldReturnFocus: false,
});

// ... later
returnFocus();

정의 (Definition)

interface UseFocusReturnOptions {
  opened: boolean;
  shouldReturnFocus?: boolean;
}

type UseFocusReturnReturnValue = () => void;

function useFocusReturn(options: UseFocusReturnOptions): UseFocusReturnReturnValue

Exported types

UseFocusReturnOptions와 UseFocusReturnReturnValue 타입은 @mantine/hooks 패키지에서 내보내져요.

import type { UseFocusReturnOptions, UseFocusReturnReturnValue } from '@mantine/hooks';

더 알아보기 (Learn more)