Modal

Installation

To install the Modal component, use the following command:

npx gbs-add-block@latest -a Modal

Overview

The Modal component provides a flexible and customizable modal dialog box for displaying content over a semi-transparent backdrop. It supports automatic closing, customizable styling, and seamless integration into any React application.

Props Table

Prop	Type	Default	Description
showModal	boolean	false	Controls the visibility of the modal.
setShowModal	(show: boolean) => void	Required	Function to toggle the modal state.
modalTitle	string	"Modal Title"	Title of the modal.
modalClass	string	Default styles	Additional classes for modal styling.
modalContentClass	string	Default styles	Classes for modal content customization.
classModalContent	string	""	Additional class for modal content.
modalTitleClass	string	Default styles	Classes for modal title.
classModalTitle	string	""	Additional class for modal title.
children	React.ReactNode	Required	Content to be displayed inside the modal.
showCloseButton	boolean	false	Determines if a close button should be displayed.
dismissible	boolean	false	Allows modal to be dismissed by clicking outside or pressing Esc.
titleId	string	"modal-title"	ID for the modal title, useful for accessibility.
closeButtonContent	React.ReactNode	undefined	Custom close button content.
animationDuration	number	200	Duration for fade-in and fade-out animations.
showTitle	boolean	false	Shows title in the Modal

Usage Guide

To use the Modal component, import it into your React application and manage its visibility with a state variable.

import React, { useState } from 'react';
import { Modal } from './path/to/Modal';

const ExampleComponent = () => {
  const [isModalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  return (
    <div>
      <button onClick={toggleModal} className="btn">
        Open Modal
      </button>

      <Modal
        showModal={isModalVisible}
        setShowModal={setModalVisible}
        modalTitle="Example Modal"
        modalContentClass="bg-white rounded-lg shadow-lg"
        showCloseButton={true}
        dismissible={true}
      >
        <p>This is the content of the modal!</p>
        <button onClick={toggleModal} className="btn">
          Close
        </button>
      </Modal>
    </div>
  );
};

export default ExampleComponent;

Key Functionalities

1. Visibility Control

• The modal's visibility is managed via the showModal prop and the setShowModal function.

2. Automatic Closing

• The dismissible prop allows users to close the modal by clicking outside it or pressing Esc.

3. Customizable Styling

• You can customize the modal's appearance using Tailwind CSS classes, particularly via modalClass, modalContentClass, and modalTitleClass.

Notes

• Ensure to provide children for the content displayed inside the modal.

• Customize modal styles by overriding the default classes.

• When using the dismissible feature, ensure it does not close unexpectedly, maintaining a good user experience.