hrnet_component_plugin_modal

Install

Install from terminal npm i hrnet_component_plugin_modal

Usage

For the Modal components open button (for exemple):
import ButtonOpenModal from 'ButtonOpenModal'

Exemple

import React from "react";
import { Modal } from "hrnet_component_plugin_modal";
import { useState } from "react";

const ButtonOpenModal = () => {
const [modalState, setModalState] = useState(false);

function openModal() {
setModalState(!modalState);
}

return (
<div className="header-container">
<button
type="button"
className="toggleModal nav-link"
onClick={openModal}
>
Click-Me !
</button>
<Modal toggle={modalState} action={openModal} />
</div>
);
};

export default ButtonOpenModal;

Use Modal

In a React app, use the Modal components in App.js:
import Modal from 'hrnet_component_plugin_modal/dist/component/Modal

Insert:
<Modal />

Close/Image

For the "closing and image" image, import an svg in an images folder in public and rename closeModal.svg and imgModal.svg

Editable project

The editable project can be retrieved from github | Link: Modal plugin