useContent()

Home > @backstage/core-components > useContent

This hook provides a react ref to the main content. Allows to set an element as the main content and focus on that component.

*Note: If contentRef is not set focusContent is noop. Content component sets this ref automatically*

Signature:

function useContent(): {
    focusContent: () => void;
    contentRef: React.MutableRefObject<HTMLElement | null> | undefined;
};

Returns:

{ focusContent: () => void; contentRef: React.MutableRefObject<HTMLElement | null> | undefined; }

Example 1

Focus current content

 const { focusContent} = useContent();
...
 <Button onClick={focusContent}>
    focus main content
 </Button>

Example 2

Set the reference to an Html element

 const { contentRef } = useContent();
...
 <article ref={contentRef} tabIndex={-1}>Main Content</article>