Function useFocusEffect

  • useFocusEffect(container, deps, selectors?): [undefined | Element, Dispatch<SetStateAction<undefined | Element>>]

  • A React hook to focus on a specific element within a container on render.

    Parameters

    • container: Element | RefObject<Element>

      The DOM element or a reference to it, to search for the 'data-focus' element.

    • deps: DependencyList

      Dependencies list passed to useEffect.

    • Optional selectors: string = '*[data-focus]'

      The CSS selector to find the element to focus on.

    Returns [undefined | Element, Dispatch<SetStateAction<undefined | Element>>]

    An array where the first element is the focused DOM element (if found) and the second element is a function to set the focused element.

    Example

    import cn from 'classnames';
    import React, { useRef } from 'react';
    import { useFocusEffect } from '@atomic-reactor/reactium-sdk-core';

    interface MyComponentProps {
        // Define your props here
    }

    const MyComponent: React.FC<MyComponentProps> = (props) => {
        const containerRef = useRef<Element>(null);

        const [focused, setFocused] = useFocusEffect(containerRef, []);

        return (
            <form ref={containerRef}>
                <input className={cn({ focused })} type='text' data-focus />
                <button type='submit'>Submit</button>
            </form>
        );
    };

Settings

Member Visibility

Theme