My Modal Component

A simple reusable modal component for React.

Installation

To install the component, you can use npm:

npm install florent-G-my-modal

Explications des sections

Usage : Here's an example of how you can use the component in your React application

import { useState } from "react";
import ModalContent from "florent-g-my-modal";
import { createPortal } from "react-dom";

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

  return (
    <>
      <button
        onClick={() => setShowModal(true)}
        className="block  mx-auto bg-slate-200 text-slate-900 p-2 rounded"
      >
        Show Modal
      </button>
      {showModal &&
        createPortal(
          <ModalContent
            closeModal={() => setShowModal(false)}
            content="Here is the content"
            className="bg-slate-300 text-slate-900 p-10 rounded relative mb-[10vh] select-none"
          />,
          document.body
        )}
    </>
  );
};

export default App;

Component Code : Here is the internal code for the ModalContent component

import React from "react";
import "./tailwind.css";

const ModalContent = ({ closeModal, content, className }) => {
  return (
    <div
      onClick={closeModal}
      className="fixed inset-0 bg-slate-800 bg-opacity-75 flex items-center justify-center"
    >
      <div onClick={(e) => e.stopPropagation()} className={className}>
        <button
          onClick={closeModal}
          className="absolute top-0 right-0 m-2 p-2 bg-red-600 text-white rounded"
        >
          X
        </button>
        <p>{content}</p>
      </div>
    </div>
  );
};

export default ModalContent;

• Development : Clone the repository and install the dependencies: git clone https://github.com/Flo-is-dev/florent-G-my-modal.git cd florent-G-my-modal npm install
• License : This project is licensed under the MIT License - see the LICENSE file for details.
• Contributing : If you would like to contribute, please fork the repository and use a feature branch. Pull requests are welcome.
• Acknowledgements : React, Tailwind CSS