# @bolttech/atoms-backdrop

> A React component that provides a backdrop for overlay content.

Latest version **0.23.3** (published 2026-06-08) · 0 weekly downloads

## Install

```sh
npm install @bolttech/atoms-backdrop
pnpm add @bolttech/atoms-backdrop
yarn add @bolttech/atoms-backdrop
bun add @bolttech/atoms-backdrop
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.23.3 |
| Published | 2026-06-08 |
| First published | 2023-05-10 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 64 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | andsfranbolt, danielkhalebbatista, pauloazevedo-ed, bruno.gomes, plinio.altoe, joaoteixeira20, esteve-cabrera, jabolttech, lucasvpaiva, herberts.fortuna, matheus.maciel.bolttech, silas.silva.bolttech |

## Links

- npm: https://www.npmjs.com/package/@bolttech/atoms-backdrop
- npm.io page: https://npm.io/package/@bolttech/atoms-backdrop

## Dependencies (4)

- [react](https://npm.io/package/react.md) 19.1.2
- [react-dom](https://npm.io/package/react-dom.md) 19.1.2
- [styled-components](https://npm.io/package/styled-components.md) 6.1.1
- [@bolttech/ui-utils](https://npm.io/package/@bolttech/ui-utils.md) 0.6.7

## Recent versions

- 0.23.3 (latest) — 2026-06-08
- 0.23.2 — 2026-04-14
- 0.23.0 — 2026-04-08
- 0.21.1 — 2026-03-17
- 0.21.0 — 2025-12-17
- 0.20.0 — 2024-09-04
- 0.19.2 — 2024-03-04
- 0.19.1 — 2024-01-17
- 0.0.1 — 2024-01-17
- 0.19.0 — 2023-11-21
- 0.18.2 — 2023-11-10
- 0.18.1 — 2023-11-07
- 0.18.0 — 2023-11-06
- 0.17.4 — 2023-09-22
- 0.17.2 — 2023-09-20
- … 23 more at https://npm.io/package/@bolttech/atoms-backdrop/versions

## README

# Backdrop Component

A React component that provides a backdrop for overlay content.

## Installation

Use the package manager [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) to install the component.

```bash
npm install @bolttech/frontend-foundations @bolttech/atoms-backdrop
```

or

```bash
yarn add @bolttech/frontend-foundations @bolttech/atoms-backdrop
```

## Props

The `Backdrop` component accepts the following properties:

| Prop        | Type          | Description                                                                                            |
|-------------|---------------|--------------------------------------------------------------------------------------------------------|
| id          | `string`      | The ID attribute for the backdrop element.                                                            |
| dataTestId  | `string`      | The `data-testid` attribute for testing.                                                               |
| onClick     | `function`    | Callback function to handle the backdrop click event.                                                 |
| appendTo    | `HTMLElement` | The element to which the backdrop should be appended. If not provided, it will default to specific elements (`#root`, `#__next`, or `document.body`). |
| className   | `string`      | Additional class name for styling purposes.                                                           |
| children    | `node`        | The child elements to be rendered inside the backdrop.                                                 |

## Usage

```jsx
import React from 'react';
import {Backdrop} from '@bolttech/atoms-backdrop';
import {BolttechThemeProvider, bolttechTheme} from "@bolttech/frontend-foundations";

const ExampleComponent = () => {
  const handleBackdropClick = () => {
    // Logic to handle the backdrop click event
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Backdrop
        id="custom-backdrop"
        dataTestId="backdrop-test"
        onClick={handleBackdropClick}
        appendTo={document.getElementById('custom-container')}
        className="custom-backdrop-class"
      >
        {/* Content to display within the backdrop */}
      </Backdrop>
    </BolttechThemeProvider>
  );
};

export default ExampleComponent;
```

## Contributing

Contributions are welcome! For any bug fixes, improvements, or new features, please open an [issue](link-to-issues) or submit a pull request.

Please make sure to follow the code standards and test your changes before submitting.

---
_Source: https://npm.io/package/@bolttech/atoms-backdrop · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._