React-modal-oop-project NPM

React Modal (Student project)

This package provides a fully customizable, ready-to-use modal component for React TypeScript projects. Developed as part of an OpenClassrooms project, this modal is designed for quick integration and flexible configuration, allowing for easy control over visibility and closing actions, with customizable styling via CSS.

Prerequisites

This project requires react >= 18

React Modal

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Installation

BEFORE YOU INSTALL: please read the prerequisites

Start with cloning this repo on your local machine:

$ git clone https://github.com/ORG/PROJECT.git
$ cd PROJECT

To install and set up the library, run:

$ npm install react-modal-oop-project

Or if you prefer using Yarn:

$ yarn add --dev react-modal-oop-project

Usage

const MyComponent = () => {
    const [isOpen, setIsOpen] = useState(false);
    const closeModal = () => setIsOpen(false);

    return (
        <ReactModal 
            open={isOpen}
            onClose={closeModal}
        >
            <h1>Test</h1>
            <p>
                content hello Lorem ipsum dolor sit amet, consectetur adipisicing
                elit. A, adipisci animi dicta dolore dolorum eos fugit in labore nisi
                nobis non numquam quaerat quam quod, repellendus soluta tempora
                voluptate voluptatum!
            </p>
        </ReactModal>
    )
}

Options

Options Overview

shouldCloseOnOverlayClick

Type	Default value
boolean	false

darkMode

Type	Default value
boolean	false

Example:

const MyComponent = () => {
    const [isOpen, setIsOpen] = useState(false);
    const closeModal = () => setIsOpen(false);

    return (
        <ReactModal
            open={isOpen}
            onClose={closeModal}
            options={{
                shouldCloseOnOverlayClick: true,
                darkMode: true,
            }}
        >
            <h1>Test</h1>
            <p>
                content hello Lorem ipsum dolor sit amet, consectetur adipisicing
                elit. A, adipisci animi dicta dolore dolorum eos fugit in labore nisi
                nobis non numquam quaerat quam quod, repellendus soluta tempora
                voluptate voluptatum!
            </p>
        </ReactModal>
    )
}

Style Options

Option	Type	Default Value	Description
`width`	`string`	`'50%'`	Defines the modal's width.
`height`	`string`	`'auto'`	Defines the modal's height.
`borderRounded`	`boolean`	`true`	Toggles rounded borders.
`backgroundColor`	`string`	`'white'`	Sets the modal's background color.
`color`	`string`	`'black'`	Sets the modal's text color.
`customCloseButton`	`ReactNode`	`undefined`	Allows a custom close button element.
`closeButtonSize`	`s m l xl`	`undefined`	Sets the close button size.

const MyComponent = () => {
    const [isOpen, setIsOpen] = useState(false);
    const closeModal = () => setIsOpen(false);

    return (
        <ReactModal
            open={isOpen}
            onClose={closeModal}
            style={{
                color: 'red',
            }}
        >
            <h1>Test</h1>
            <p>
                content hello Lorem ipsum dolor sit amet, consectetur adipisicing
                elit. A, adipisci animi dicta dolore dolorum eos fugit in labore nisi
                nobis non numquam quaerat quam quod, repellendus soluta tempora
                voluptate voluptatum!
            </p>
        </ReactModal>
    )
}