Show
Show is a responsive primitive that displays children at specified breakpointsInstallation
| Install | yarn add @atlaskit/primitives |
|---|---|
| Source | Bitbucket.org, (opens new window) |
| npm | @atlaskit/primitives, (opens new window) |
| Bundle | unpkg.com, (opens new window) |
Show
Using Show allows you to show the children using CSS display: … when the viewport size is above
a specified breakpoint. By default, unless the breakpoint is met, contents are hidden.
Children that are not shown are still rendered into the DOM, so there so there is typically little performance savings — primarily that they are not painted.
Try resizing your browser window
This text is visible only 1024px and above
import React from 'react';
import { Stack } from '@atlaskit/primitives/compiled/stack';
import { Show } from '@atlaskit/primitives/responsive/show';
export default function Example(): React.JSX.Element {
return (
<Stack alignInline="start" space="space.100">
Try resizing your browser window
<Show above="md">
<strong>This text is visible only 1024px and above</strong>
</Show>
</Stack>
);
}Mixing Show and Hide
Prefer using consistent above or below for readability and consistency.
Please connect using your mobile devicedesktop or laptop
import React from 'react';
import { Hide } from '@atlaskit/primitives/responsive/hide';
import { Show } from '@atlaskit/primitives/responsive/show';
export default function Example(): React.JSX.Element {
return (
<p>
Please connect using your{' '}
<Show below="md" as="span">
mobile device
</Show>
<Hide below="md" as="span">
desktop or laptop
</Hide>
</p>
);
}