Backdrop Component

A React component that provides a backdrop for overlay content.

Installation

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`

`Props`

The Backdrop component accepts the following properties:

| Prop | Type | Description | |-------------|---------------|--------------------------------------------------------------------------------------------------------| | id |string| The ID attribute for the backdrop element. | | dataTestId |string | The data-testidattribute 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 ( id="custom-backdrop" dataTestId="backdrop-test" onClick={handleBackdropClick} appendTo={document.getElementById('custom-container')} className="custom-backdrop-class" > {/ Content to display within the backdrop /} ); };

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.

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 (
    
              id="custom-backdrop"
        dataTestId="backdrop-test"
        onClick={handleBackdropClick}
        appendTo={document.getElementById('custom-container')}
        className="custom-backdrop-class"
      >
        {/ Content to display within the backdrop /}
      
    
  );
};

export default ExampleComponent;