hrnet_component_plugin_modal
v1.4.6
Published
Modal component for tp_oc
Downloads
12
Readme
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