npm i @accessible/visually-hidden

A React component for adding visually hidden styles to elements

Quick Start

Simply wrap a child element that accepts a style prop and this component will add visually hidden styles to it without overwriting styles already present on the child.

`jsx harmony // VisuallyHidden is the component // visuallyHidden is a style object import {VisuallyHidden, visuallyHidden} from '@accessible/visually-hidden'

export default (props) => ( <VisuallyHidden> <input type='checkbox' {...props} /> </VisuallyHidden> ) // <input type='checkbox' style='...'/> `

LICENSE

MIT

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

2.0.0 (2020-07-07)

⚠ BREAKING CHANGES

• The VisuallyHidden component is no longer a default export. It's a named one e.g. import {VisuallyHidden} from '@accessible/visually-hidden'.

• move default export to named export (ff36dad)

2.0.0 (2020-07-07)

⚠ BREAKING CHANGES

• The VisuallyHidden component is no longer the default export. It is now a named export e.g. import {VisuallyHidden, visuallyHiden} from '@accessible/visually-hidden'

• change default export to named export (90b55d8)