Socket
Socket
Sign inDemoInstall

@bolttech/molecules-modal

Package Overview
Dependencies
8
Maintainers
8
Versions
32
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@bolttech/molecules-modal

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


Version published
Weekly downloads
277
increased by24.77%
Maintainers
8
Created
Weekly downloads
 

Readme

Source

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

or

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:

PropTypeDescription
childrenReactNodeContent to be displayed within the modal.
dataTestIdstringThe data-testid attribute for testing purposes.
isOpenbooleanWhether the modal is open or closed.
titlestringTitle of the modal dialog box.
confirmFooterButtonsTypeObject containing the title, variant and onclick of the confirm button
cancelFooterButtonsTypeObject containing the title, variant and onclick of the cancel button.
footerDirectiondefault or reverseDirection of the buttons on the footer.
fullHeightbooleanBoolean representing if the modal should take the full height of the page when on mobile.
closeOnBackdropClickbooleanBoolean 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.

FAQs

Last updated on 01 Apr 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc