Stable

Hidden

Hidden is a layout component to manage the responsive visibility of elements.

GitHub, opens in a new tab·Storybook, opens in a new tab·Playroom, opens in a new tab

Installation

bash

npm install @nib/layout

Usage

jsx

import {Hidden} from '@nib/layout';

Do not style layout components

You must not apply styled-components to this component as it will interfere with the structure required for the current styling. This is true for all layout components.

Interactive demo

jsx

<Hidden below="xs" screen={false} print={true}>
  <LargePlaceholder>Hidden content</LargePlaceholder>
</Hidden>

<Hidden below="xs" screen={false} print={true}>
  <LargePlaceholder>Hidden content</LargePlaceholder>
</Hidden>

Props

Prop	Type	Default	Description
`children`	node		The contents of the Hidden.
`below`	string		A breakpoint value which defines the minimum screen width the content will be visible.
`above`	string		A breakpoint value which defines the maximum screen width the content will be visible.
`print`	boolean	`false`	Whether to hide the content when printing the page.
`screen`	boolean	`false`	Whether to hide the content from the screen but still available for screen readers.
`screenReader`	boolean	`false`	Whether to hide the content from the screen reader but not the screen.

Considerations

When using this component, be mindful of the implications it may have on all situations.

A number of situations may intend for the content to still be available for screen reading, but remain visually hidden. In these cases it is essential to use the screen prop instead of the breakpoint props (above and below) as these props hide content for both the screen and screen readers.

Edit this page