import React, { useState } from "react";
import Modal from "react-abc-modal";

const yourComponent = () => {
  const [isOpen, setOpen] = useState(false);

  return (
    <>
      {/* Example to open Modal on click */}
      <button onClick={() => setOpen(true)}>Open modal</button>

      {/* Your Modal and its children */}
      <Modal isOpen={isOpen} setOpen={setOpen} closeOutside={true} icon={true}>
        <h1>Write anything inside!</h1>
      </Modal>
    </>
  );
};

export default yourComponent;

{
  /* The variables to set your custom inline css */
}
const styleOverlay = {
  backgroundColor: "red",
};
const styleSection = {
  backgroundColor: "blue",
};
const styleIconClose = {
  backgroundColor: "yellow",
};

return (
  <>
    {/* All existing props */}
    <Modal
      isOpen={isOpen}
      setOpen={setOpen}
      closeOutside={true}
      icon={true}
      classOverlay="myOverlayClass"
      classSection="mySectionClass"
      classIconClose="myIconCloseClass"
      styleOverlay={styleOverlay}
      styleSection={styleSection}
      styleIconClose={styleIconClose}
    >
      <p>Add any tag here</p>
      {/* If you want to use your own component to close the Modal on click */}
      <p onClick={() => setOpen(false)}>Click me!</p>
    </Modal>
  </>
);