# @teste-ui/visually-hidden

> A React component that visually hides its content

Latest version **2.0.4** (published 2022-07-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @teste-ui/visually-hidden
pnpm add @teste-ui/visually-hidden
yarn add @teste-ui/visually-hidden
bun add @teste-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.0.4 |
| Published | 2022-07-14 |
| First published | 2022-07-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 23.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Segun Adebayo |
| Maintainers | benits |
| Keywords | react, component, chakra, chakra ui, a11y, aria, accessibility, accessible, visually hidden, visually hidden component, sr-only, screenreader |

## Links

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

## Dependencies (1)

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

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 2.0.4 (latest) — 2022-07-14
- 2.0.3 — 2022-07-13

## README

# @teste-ui/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 @teste-ui/visually-hidden

# or

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

## Import component

```jsx
import { VisuallyHidden } from "@teste-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/@teste-ui/visually-hidden · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._