Visually Hidden

Visually Hidden is used when an element needs to be available to assistive technology, but otherwise hidden. The visually hidden component hides text visually from the screen, but keeps it available to assistive technologies, such as screen readers. The component shouldn't be used to hide interactive content.

install	version	usage
yarn add @ciceksepeti/cui-visually-hidden	0.1.0	import {VisuallyHidden} from '@ciceksepeti/cui-visually-hidden'

Wai-AriaW3

RepositoryGitHub

PackageNPM

Content

Visually hides its content from UI without removing it from DOM. Assistive technologies can still attract the element but it will not take any space in the DOM. VisuallyHidden is a polymorphic component. That's why can be rendered as any valid HTML tag.

Example

Example of a default behavior of VisuallyHidden component. Renders as 'div' by default.

import React, { useState } from 'react';
import VisuallyHidden from '@ciceksepeti/cui-visually-hidden';

export function CUIVisuallyHiddenDefault() {
  const [disable, setDisable] = useState(false);
  return (
      <VisuallyHidden disabled={disable}>
        Should not be seen! <hr />
      </VisuallyHidden>
      Disabled State : {disable.toString()} <br />
      <button onClick={() => setDisable(!disable)}>Toggle Disable</button>
  );
}

PREVIEW

Visually Hidden Default

Should not be seen!

---

Disabled State : false

Props

Name	Type	Default	Required	Description
disabled	boolean	false	-	Enables disabling behavior of visually hidden component.
children	React.ReactNode		required	The content you want to be visually hidden..
as	string	div	-	Changes html tag of visually hidden component which renders to DOM

Playground

Styling

Element Selector

tip

To learn more about selectors please visit the CSS Selector Reference page.

Name	Type
[data-cui-visually-hidden]	Element Selector