Blanket

A blanket covers the underlying UI for a layered component, such as a modal dialog or a tooltip.

Default

A blanket overlays the rest of the page with a transparent grey when used with a modal or popup.

An onBlanketClicked prop is provided to catch clicks elsewhere on the page other than the modal or popup. Blanket doesn't have its' own show/hide functionality, it should be controlled with its' parent element.

import { useCallback, useState } from 'react';

import Blanket from '@atlaskit/blanket/blanket';
import Button from '@atlaskit/button/default/button';
import { jsx } from '@atlaskit/css';
import { Box } from '@atlaskit/primitives/compiled/box';

const BlanketBasicExample = (): JSX.Element => {
	const [isBlanketVisible, setIsBlanketVisible] = useState(false);
	const [shouldAllowClickThrough, setShouldAllowClickThrough] = useState(true);

	const showBlanketClick = useCallback(() => {
		setIsBlanketVisible(true);
		setShouldAllowClickThrough(false);
	}, []);

	const onBlanketClicked = useCallback(() => {
		setIsBlanketVisible(false);
		setShouldAllowClickThrough(true);
	}, []);

	return (
		<Box>
			<Button appearance="default" onClick={showBlanketClick} testId="show-button">
				Show blanket
			</Button>
			<Blanket
				onBlanketClicked={onBlanketClicked}
				isTinted={isBlanketVisible}
				shouldAllowClickThrough={shouldAllowClickThrough}
				testId="basic-blanket"
			/>
		</Box>
	);
};

export default BlanketBasicExample;

Clickthrough

If you enable the shouldAllowClickThrough prop, onBlanketClicked doesn't get called and the elements underneath the blanket can be interacted with directly.

import React, { useCallback, useState } from 'react';

import Blanket from '@atlaskit/blanket/blanket';
import Button from '@atlaskit/button/default/button';
import { Box } from '@atlaskit/primitives/compiled/box';

const BlanketClickthroughExample = (): React.JSX.Element => {
	const [isBlanketVisible, setIsBlanketVisible] = useState(false);
	const showBlanketClick = useCallback(() => {
		setIsBlanketVisible((isBlanketVisible) => !isBlanketVisible);
	}, [setIsBlanketVisible]);
	return (
		<Box>
			<Button appearance="default" onClick={showBlanketClick}>
				{!isBlanketVisible ? 'Show blanket' : 'Hide blanket'}
			</Button>

			<Blanket isTinted={isBlanketVisible} shouldAllowClickThrough />
		</Box>
	);
};

export default BlanketClickthroughExample;

Children

A blanket with children will exclude the children from being tinted by the blanket.

Open this example in CodeSandbox, (opens new window) for a full-page experience.

import { useCallback, useState } from 'react';

import Blanket from '@atlaskit/blanket/blanket';
import Button from '@atlaskit/button/default/button';
import { cssMap, jsx } from '@atlaskit/css';
import { Box } from '@atlaskit/primitives/compiled/box';
import { token } from '@atlaskit/tokens';

const blanketChildStyles = cssMap({
	root: {
		width: '50%' as any,
		marginBlockStart: token('space.600'),
		marginInlineEnd: token('space.600'),
		marginBlockEnd: token('space.600'),
		marginInlineStart: token('space.600'),
		paddingBlock: token('space.300'),
		backgroundColor: token('elevation.surface'),
	},
});

const BlanketWithChildrenExample = (): JSX.Element => {
	const [isBlanketVisible, setIsBlanketVisible] = useState(false);
	const [shouldAllowClickThrough, setShouldAllowClickThrough] = useState(true);

	const showBlanketClick = useCallback(() => {
		setIsBlanketVisible(true);
		setShouldAllowClickThrough(false);
	}, []);

	const onBlanketClicked = useCallback(() => {
		setIsBlanketVisible(false);
		setShouldAllowClickThrough(true);
	}, []);

	return (
		<Box>
			<Button appearance="default" onClick={showBlanketClick} testId="show-button">
				Show blanket
			</Button>

			<Blanket
				onBlanketClicked={onBlanketClicked}
				isTinted={isBlanketVisible}
				shouldAllowClickThrough={shouldAllowClickThrough}
				testId="blanket-with-children"
			>
				<Box xcss={blanketChildStyles.root}>
					Click "Show blanket" button to open the blanket & click the blanket to dismiss it.
				</Box>
			</Blanket>
		</Box>
	);
};

export default BlanketWithChildrenExample;

Was this page helpful?

We use this feedback to improve our documentation.