@pingolu/7pingolu-modal-package-test

This is a package for a training project of the OPENCLASSROOM JS REACT Developer curriculum

Description

@pingolu/7pingolu-modal-package-test is a React component package that provides a customizable modal dialog. This component is lightweight, easy to integrate, and supports modern React features.

Installation

You can install this package via NPM:

npm install @pingolu/7pingolu-modal-package-test --save

Or via Yarn:

yarn add @pingolu/7pingolu-modal-package-test

Peer Dependencies

Make sure you have the following peer dependencies installed in your project:

• React ^18.3.1
• React DOM ^18.3.1

You can install them with:

npm install react react-dom --save

Usage

Here’s a basic example of how to use the modal component in your React project:

import React from 'react';
import ReactDOM from 'react-dom';
import Modal from '@pingolu/7pingolu-modal-package-test';

function App() {
  const [isOpen, setIsOpen] = React.useState(false);

  const textContent="Modal is open!"

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} textContent={textContent} />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

API Reference

Modal Component

Props

• children (part of ReactDom Portal Syntax):Pre-written modal window.No need to specify.
• isOpen (boolean, required): Controls whether the modal is open or closed.
• onClose (function, required): A callback function triggered when the modal is requested to close.
• textContent (string,required): Test to be displayed inside modal window.

License

This project is licensed under the ISC License - see the LICENSE file for details.