@bolttech/atoms-backdrop NPM

Backdrop Component

A React component that provides a backdrop for overlay content.

Installation

Use the package manager npm or yarn to install the component.

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

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

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;