agr-custom-modal

1.3.0 • Public • Published

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

Contributing

If you'd like to contribute to this project, please submit a pull request or create an issue on the Github repository.

License

This project is licensed under the MIT license. See the LICENSE file for details.

Readme

Keywords

Package Sidebar

Install

npm i agr-custom-modal

Weekly Downloads

1

Version

1.3.0

License

ISC

Unpacked Size

20.3 kB

Total Files

8

Last publish

Collaborators

  • grimonprezalexis