tlouvet-react-modal v1.0.3

  padding: 0 30px;
  background-color: white;
  border-radius: 8px;
  width: 65%;
  max-width: 500px;
  position: relative;
  box-shadow: 0 0 10px #000;

import { useState } from "react";
import { Modal } from "tlouvet-react-modal";

export function TestModal(){
  const [openModal, setOpenModal] = useState(false);

  return (
    <>
      <button onClick={() => setOpenModal(true)}>OpenModal</button>

      <Modal open={openModal} onClose={setOpenModal}>
        <div>
          <p> Modal Opened </p>
          <p> Thank you for using TLouvet-react-modal </p> 
        </div>
      </Modal>
    </>
  )
}

import { useState } from "react";
import { Modal } from "tlouvet-react-modal";

export function TestModal(){
  const [openModal, setOpenModal] = useState(false);

  return (
    <>
      <button onClick={() => setOpenModal(true)}>OpenModal</button>

      <Modal 
        open={openModal} 
        onClose={setOpenModal} 
        withDefaultClose={false} 
        wrapperStyle={{backgroundColor: `black`, color: `white`}}
      >
          <div>
            <p> Modal Opened </p>
            <p> Thank you for using TLouvet-react-modal </p> 
            <button onClick={() => setOpenModal(false)}>Close<button>
          </div>
      </Modal>
    </>
  )
}