Visibility

ScreenReaderOnly

ScreenReaderOnly Overview

The ScreenReaderOnly component wraps an element making sure that it is not visible to the user but still readable by a screen reader.

ScreenReaderOnly Props

childrenstring

The description of an element is passed as the child of the component.

idstring

When provided the id can be used to reference this element, for example from a `aria-describedby` attribute.

ScreenReaderOnly Playground

Description

import React from 'react';
import { ScreenReaderOnly } from 'newskit';

export default () => (
  <ScreenReaderOnly id="sr-only">
    Element description
  </ScreenReaderOnly>
);

Visible

Visible Overview

The Visible is a container component. The content will only be visible if the screen size matches the applied breakpoint.

Visible Props

childrenany

Content of the visiblity container

displaystring

CSS attribute for display.More information

xsboolean

Render when in xs breakpoint

smboolean

Render when in sm breakpoint

mdboolean

Render when in md breakpoint

lgboolean

Render when in lg breakpoint

xlboolean

Render when in xl breakpoint

targetDevicesArray<Devices>

Array of devices for which the content is hidden with higher priority than the above breakpoints

Visible Playground

Visible Content

import React from 'react';
import { Visible } from 'newskit';

export default () => <Visible xs>Visible Content</Visible>;

Hidden

Hidden Overview

The Hidden is a container component. The content will only be hidden if the screen size matches the applied breakpoint.

Hidden Props

childrenany

Content of the visiblity container

displaystring

CSS attribute for displayMore information

xsboolean

Hidden when in xs breakpoint

smboolean

Hidden when in xs breakpoint

mdboolean

Hidden when in xs breakpoint

lgboolean

Hidden when in xs breakpoint

xlboolean

Render when in xl breakpoint

targetDevicesArray<Devices>

Array of devices for which the content is hidden with higher priority than the above breakpoints

Hidden Playground

Hidden Content

import React from 'react';
import { Hidden } from 'newskit';

export default () => <Hidden xs>Hidden Content</Hidden>;