Visually Hidden

Using the VisuallyHidden component will hide the children of this component visually, while still allowing the content to be accessed by screenreaders.

Basic Usage

import React from 'react';
import { VisuallyHidden } from 'react-magma-dom';

export function Example() {
  return (
    <VisuallyHidden>
      This text can be read by a screen reader, but does not appear on the
      screen.
    </VisuallyHidden>
  );
}

Visually Hidden Props

This component uses forwardRef. The ref is applied to the outer div element.

All of the global HTML attributes can be provided as props and will be applied to the wrapping div element that gets rendered.