@bolttech/molecules-modal NPM

Modal Component

The Modal component is a customizable React component that displays a modal dialog box with a title, content, and action buttons.

Installation

To use the Modal component, you need to install the required dependencies:

npm install @bolttech/frontend-foundations @bolttech/molecules-modal

yarn add @bolttech/frontend-foundations @bolttech/molecules-modal

Usage

You can utilize the Modal component by importing it and including it in your JSX. Here's an example:

import React, { useState } from 'react';
import { Modal } from '@bolttech/molecules-modal';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations'; // Adjust the path to your component

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => {
    setIsModalOpen(true);
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <button onClick={handleOpenModal}>Open Modal</button>
      <Modal
        isOpen={isModalOpen}
        title="Confirmation"
        cancel={{
          title: 'Cancel',
          variant: 'ghost',
          onClick: () => setIsModalOpen(false),
        }}
        cancel={{
          title: 'Confirm',
          variant: 'transaction',
          onClick: () => setIsModalOpen(true),
        }}
        footerDirection="default"
        fullHeight={true}
        closeOnBackdropClick={true}
      >
        <p>Are you sure you want to proceed?</p>
      </Modal>
    </BolttechThemeProvider>
  );
}

export default App;

Props

The Modal component accepts the following props:

Prop	Type	Description
`children`	`ReactNode`	Content to be displayed within the modal.
`dataTestId`	`string`	The data-testid attribute for testing purposes.
`isOpen`	`boolean`	Whether the modal is open or closed.
`title`	`string`	Title of the modal dialog box.
`confirm`	`FooterButtonsType`	Object containing the title, variant and onclick of the confirm button
`cancel`	`FooterButtonsType`	Object containing the title, variant and onclick of the cancel button.
`footerDirection`	`default` or `reverse`	Direction of the buttons on the footer.
`fullHeight`	`boolean`	Boolean representing if the modal should take the full height of the page when on mobile.
`closeOnBackdropClick`	`boolean`	Boolean representing if the modal should close when clicking outside of it.

Functionality

The Modal component provides the following functionality:

Modal Display: Renders a modal dialog box with the specified title, content, and buttons.
Opening and Closing: Allows opening and closing the modal by setting the isOpen prop.
Action Buttons: Provides action buttons for canceling and confirming.

Contributions

Contributions to the Modal component are welcomed. If you encounter issues or have suggestions for improvements, feel free to open an issue or submit a pull request on the component's Bitbucket repository.