import { Meta, Canvas } from "@storybook/addon-docs/blocks";
import * as VisuallyHiddenStories from "./VisuallyHidden.stories";

<Meta of={VisuallyHiddenStories} />

# VisuallyHidden

Allows users to place content in the DOM that is only visible to screen readers.

There is also a hook available for this component: `useVisuallyHidden`. This can apply the same styles to any element.

## Install

```bash
yarn add @simplybusiness/mobius
```

## Usage

```js
import { VisuallyHidden } from "@simplybusiness/mobius";
```

### `useVisuallyHidden`

```js
import { useVisuallyHidden } from "@simplybusiness/mobius";

function MyComponent() {
  return <VisuallyHidden>This is hidden from sight</VisuallyHidden>;
}
```

### Default

<Canvas of={VisuallyHiddenStories.Default} />
