@purpurds/visually-hidden

import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";

import * as VisuallyHiddenStories from "./src/visually-hidden.stories"; import packageInfo from "./package.json";

VisuallyHidden

Version {packageInfo.version}

Component provides text only for screen readers. This is used to explain content or situation which is not explainable without clear text. Component is designed to be hidden, but shown when screen reader makes focus.

Example use cases:

• There is content being loaded
• When visual style is not understood by screen reader, like with Price component

Showcase

Properties

Installation

Via NPM

Add the dependency to your consumer app like "@purpurds/purpur": "^x.y.z"

In MyComponent.tsx

import { VisuallyHidden } from "@purpurds/purpur";

export const MyComponent = () => {
  return (
    <div>
      <VisuallyHidden {...someProps}>Some content</VisuallyHidden>
    </div>
  );
};