Function useFocusScope

  • Creates a focus scope inside a container element and returns controls to move focus around.

    Parameters

    • ref: RefObject<Element>

      A ref to a container element inside which focus state is managed.

    • props: FocusScopeProps = emptyObject

      Focus scope props.

    Returns FocusControls

    Focus controls that allow to move focus around in a container element. An object which identity never changes between renders.

    const containerRef = useRef(null);
    const focusControls = useFocusScope(containerRef);

    <FocusControlsProvider value={focusControls}>
    <div ref={containerRef}>
    <input/>
    </div>
    </FocusControlsProvider>