The Blanket component provides an overlay that centers content that fills its parent. It's ideal for creating modal dialogs, overlays, and other UI elements that need to appear above the main content.

Importing

The component can be imported via:

import { Blanket } from '@customerio/pluma-components/react';

Usage

Background content that will be covered by the blanket.

Modal Content

<div style={{ position: 'relative', height: '200px', background: '#f5f5f5', padding: '1rem' }}>
  <Text>Background content that will be covered by the blanket.</Text>
  <Blanket withBackground={true}>
    <div style={{ background: 'white', padding: '2rem', borderRadius: '8px', textAlign: 'center' }}>
      <Text mb="200" display="block">Modal Content</Text>
      <Button variant="primary">Close</Button>
    </div>
  </Blanket>
</div>

Background Overlay

Use the withBackground prop to control whether the blanket displays a semi-transparent background overlay.

Background content is still visible.

<div style={{ position: 'relative', height: '150px', background: '#f5f5f5', padding: '1rem' }}>
  <Text>Background content is still visible.</Text>
  <Blanket withBackground={false}>
    <Button variant="secondary">Floating Button</Button>
  </Blanket>
</div>

Active State

Control the visibility of the blanket with the isActive prop. When set to false, the blanket fades out and becomes non-interactive.

Background content

Modal Content

import { useState } from 'react';
import { Blanket, Button, Text } from '@customerio/pluma-components/react';

export default function ActiveBlanketExample() {
  const [isActive, setIsActive] = useState(true);
  
  return (
    <div style={{ position: 'relative', height: '200px', background: '#f5f5f5', padding: '1rem' }}>
      <Text>Background content</Text>
      <Button onClick={() => setIsActive(true)} mb="100">
        Show Blanket
      </Button>
      <Blanket withBackground={true} isActive={isActive}>
        <div style={{ background: 'white', padding: '2rem', borderRadius: '8px', textAlign: 'center' }}>
          <Text mb="200" display="block">Modal Content</Text>
          <Button variant="primary" onClick={() => setIsActive(false)}>Close</Button>
        </div>
      </Blanket>
    </div>
  );
}

API

`PlumaBlanket` `extends Box`

`isActive` `boolean | undefined`

Whether the blanket is active. Toggle this to false to hide the blanket with an animation.

`withBackground` `boolean | undefined`

Whether to display the semi-transparent background overlay.

Blanket

Importing

Usage

Background Overlay

Active State

API

PlumaBlanket extends Box

isActive boolean | undefined

withBackground boolean | undefined

On this page

`PlumaBlanket` `extends Box`

`isActive` `boolean | undefined`

`withBackground` `boolean | undefined`