1.0.9 • Published 1 year ago
hrnet-react-modal-component v1.0.9
Plugin to add basic Modal component from HRnet project
A React-Component for the HRnet project from Openclassroom. It appears when a user is successfully created.
Features
- Dynamic diplay control
- Lock the webpage controls as long as the modal is shown
- Provides 2 actions: click outside & confirm
Get started
Download
Requirements
- React 18
Installation
using npm
npm install hrnet-modal
using yarn
yarn add hrnet-modal
Usage
Import the plugin from node_modules in your React component. The Modal requires 2 props to work:
isOpen
(boolean): variable controlling the display of the modalonConfirm
(function): action triggered when clicking on the 'check' icon (& triggered on clicking outside the modal if no action is provided for this action) The Modal has 2 optionnal props:message
(string): personnalized message written on the modalonClickOutside
(function): action triggered when clicking outside the modal
ExampleAppComponent.js
import Modal from "./lib/Modal";
import { useState } from "react";
function ExampleAppComponent() {
const [modalSwitch, setModalSwitch] = useState(false);
const toggleModal = () => setModalSwitch(!modalSwitch);
return (
<div className="App">
<div onClick={toggleModal}>Click here to open modal</div>
<Modal modalStatus={modalSwitch} onConfirm={toggleModal} />
</div>
);
}
export default ExampleAppComponent;