Agr-custom-modal NPM

A fully-featured and customizable Modal component for React, with support for title, content, and custom actions.

Installation

npm install agr-custom-modal

Usage

In this example, the Modal component is used to display a simple modal dialog when a button is clicked. The isOpen prop is used to control whether the modal is displayed or hidden, and the onClose prop is used to handle the closing of the modal. The title and content of the modal are passed as children to the component.

import React, { useState } from 'react';
import Modal from 'agr-custom-modal';

function App() {
  const [showModal, setShowModal] = useState(false);

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

  const handleCloseModal = () => {
    setShowModal(false);
  };

  return (
    <div>
      <button onClick={handleOpenModal}>Open Modal</button>
      <Modal
        title="Example Modal"
        isOpen={showModal}
        onClose={handleCloseModal}
      >
        <p>This is the body of the modal.</p>
        <button onClick={handleCloseModal}>Close Modal</button>
      </Modal>
    </div>
  );
}

export default App;

Props

Prop	Type	Required	Description
title	string	Yes	The title of the Modal
isOpen	boolean	Yes	Determines whether the Modal is visible or not
onClose	function	Yes	Callback function that is called when the Modal is closed
children	node	No	The content of the Modal

Customization

The Modal component can be easily customized by modifying the CSS styles that are applied to it. The component is designed to be as unobtrusive as possible, with a minimal set of default styles that can be easily overridden.

To customize the styles of the Modal component, you can create a new CSS file and import it into your application:

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
}

.close-button {
  background-color: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

In this example, the default styles for the Modal component