Hide

Hide is a responsive primitive that hides children at specified breakpoints

Installation

Package installation information
Install	`yarn add @atlaskit/primitives`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/primitives, (opens new window)
Bundle	unpkg.com, (opens new window)

Hide

Using Hide allows you to Hide the children using CSS display: none when the viewport size is above a specified breakpoint. By default, unless the breakpoint is met, contents are hidden.

Children that are hidden 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

import React from 'react';

import Button from '@atlaskit/button/default/button';
import MaximizeIcon from '@atlaskit/icon/core/maximize';
import { Stack } from '@atlaskit/primitives/compiled/stack';
import { Hide } from '@atlaskit/primitives/responsive/hide';

export default function Example(): React.JSX.Element {
	return (
		<Stack alignInline="start" space="space.100">
			Try resizing your browser window
			<Button iconBefore={MaximizeIcon}>
				<Hide below="md">This text is visible only at larger breakpoints</Hide>
			</Button>
		</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>
	);
}

Was this page helpful?

We use this feedback to improve our documentation.