A React component that provides a backdrop for overlay content.
npm install @bolttech/atoms-backdropA React component that provides a backdrop for overlay content.
Use the package manager npm or yarn to install the component.
``bash`
npm install @bolttech/frontend-foundations @bolttech/atoms-backdrop
or
`bash`
yarn add @bolttech/frontend-foundations @bolttech/atoms-backdrop
The Backdrop component accepts the following properties:
| Prop | Type | Description |
|-------------|---------------|--------------------------------------------------------------------------------------------------------|
| id | string | The ID attribute for the backdrop element. |string
| dataTestId | | The data-testid attribute for testing. |function
| onClick | | Callback function to handle the backdrop click event. |HTMLElement
| appendTo | | The element to which the backdrop should be appended. If not provided, it will default to specific elements (#root, #__next, or document.body). |string
| className | | Additional class name for styling purposes. |node
| children | | The child elements to be rendered inside the backdrop. |
`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 (
dataTestId="backdrop-test"
onClick={handleBackdropClick}
appendTo={document.getElementById('custom-container')}
className="custom-backdrop-class"
>
{/ Content to display within the backdrop /}
);
};
export default ExampleComponent;
``
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.