@erik-th/hrnet-modal

hrnet-modal

Modal dialog component for ReactJS.

Installation

To install, you can use npm or yarn:

$ npm i @erik-th/hrnet-modal
$ yarn add @erik-th/hrnet-modal

To use hrnet-modal in a React app:

• In a react app, import the component: import { HrnetModal } from "@erik-th/hrnet-modal"

• Props:

      <HrnetModal
        openModal={openHrnetModal}
        setOpenModal={setOpenHrnetModal}
        hrnetModalMessage={hrnetModalMessage}
      />

openModal: if true the modal is shown and hidden if false. setOpenModal: toggle the state of the modal - set openModal to true or false. hrnetModalMessage: String of the modal's message

Exemple

Here is a simple example of hrnet-modal being used:

import { useState } from "react";
import ReactDOM from 'react-dom';

<!-- import HrnetModal -->
import { HrnetModal } from "@erik-th/hrnet-modal";

function App() {
  const [openHrnetModal, setOpenHrnetModal] = useState(false);

  const handleModal = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setOpenHrnetModal((toggle) => !toggle);
  };

  <!-- Customize your message -->
  const hrnetModalMessage = "Test message - hrnetModalMessage";

  const content = (
    <div className="container">
      <button onClick={handleModal}>Open modal</button>

      <HrnetModal
        openModal={openHrnetModal}
        setOpenModal={setOpenHrnetModal}
        hrnetModalMessage={hrnetModalMessage}
      />
    </div>
  );

  return content;
}

ReactDOM.render(<App />, appElement);