useFocusWithin

useFocusWithin (요소 내부 포커스 감지)

useFocusWithin 훅은 주어진 요소 안의 어떤 요소에 포커스가 있는지 감지해요. :focus-within CSS 선택자와 같은 방식으로 동작해요.

출처: 문서

본문

useFocusWithin 훅은 다른 요소 안의 어떤 요소에 포커스가 있는지 감지해요. :focus-within CSS 선택자와 같은 방식으로 동작해요.

import { useFocusWithin } from '@mantine/hooks';
import { TextInput, Button, Box, Text } from '@mantine/core';

function Demo() {
  const { ref, focused } = useFocusWithin();

  return (
    <Box ref={ref} p="md" style={{ border: '1px solid' }}>
      <Text mb="md">One of elements has focus: {focused.toString()}</Text>
      <TextInput label="Focus this input" placeholder="Focus me" />
      <Button mt="md">Button</Button>
    </Box>
  );
}

정의 (Definition)

interface UseFocusWithinOptions {
  onFocus?: (event: FocusEvent) => void;
  onBlur?: (event: FocusEvent) => void;
}

interface UseFocusWithinReturnValue {
  ref: React.RefCallback;
  focused: boolean;
}

function useFocusWithin(
  options?: UseFocusWithinOptions,
): UseFocusWithinReturnValue

Exported types

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

import type { UseFocusWithinOptions, UseFocusWithinReturnValue } from '@mantine/hooks';

더 알아보기 (Learn more)