# @nature-ui/visually-hidden

> A React component that visually hides it's content

Latest version **2.2.13** (published 2023-04-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nature-ui/visually-hidden
pnpm add @nature-ui/visually-hidden
yarn add @nature-ui/visually-hidden
bun add @nature-ui/visually-hidden
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.13 |
| Published | 2023-04-12 |
| First published | 2020-12-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 275.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Divine Hycenth |
| Maintainers | dnature |
| Keywords | react, component, nature ui, a11y, aria, accessibility, accessible, visually hidden, visually hidden component, sr-only, screenreader |

## Links

- npm: https://www.npmjs.com/package/@nature-ui/visually-hidden
- Repository: https://github.com/DNature/nature-ui
- Homepage: https://github.com/DNature/nature-ui#readme
- Issues: https://github.com/DNature/nature-ui/issues
- npm.io page: https://npm.io/package/@nature-ui/visually-hidden

## Dependencies (1)

- [@nature-ui/utils](https://npm.io/package/@nature-ui/utils.md) 2.2.13

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.2.13 (latest) — 2023-04-12
- 0.0.0-dev-20230411071731 (dev) — 2023-04-11
- 2.2.12 — 2023-04-12
- 2.2.11 — 2023-04-12
- 0.0.1 — 2023-04-11
- 0.0.0 — 2023-04-11
- 0.0.0-dev-20230410162901 — 2023-04-10
- 0.0.0-dev-20230410131720 — 2023-04-10
- 0.0.0-dev-20230409203337 — 2023-04-09
- 0.0.0-dev-20230409203113 — 2023-04-09
- 0.0.0-dev-20230409201910 — 2023-04-09
- 2.2.1 — 2023-04-09
- 2.2.0 — 2023-03-01
- 0.0.0-dev-20230301133840 — 2023-03-01
- 0.0.0-dev-20230301120121 — 2023-03-01
- … 27 more at https://npm.io/package/@nature-ui/visually-hidden/versions

## README

# Visually Hidden

The visually hidden component styles itself so that it’s content is not visible,
but it is available to assistive technologies like screen readers and other text
to speech programs.

## Installation

```sh
yarn add @nature-ui/visually-hidden

# or

npm i @nature-ui/visually-hidden
```

## Import component

```jsx
import { VisuallyHidden } from '@nature-ui/visually-hidden';
```

## Basic usage

```jsx
// it renders a `span` by default
<VisuallyHidden>This content will be hidden on screen</VisuallyHidden>

// for visually hidden input fields
<VisuallyHiddenInput type="checkbox" defaultChecked/>
```

## References

- https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
- https://a11yproject.com/posts/how-to-hide-content/

---
_Source: https://npm.io/package/@nature-ui/visually-hidden · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._