@bolttech/atoms-backdrop

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

or

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;

Contributing

Contributions are welcome! For any bug fixes, improvements, or new features, please open an issue or submit a pull request.

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