0.1.4 • Published 2 years ago
@del83/plugin_modal_p14 v0.1.4
MODAL WINDOW PLUGIN
React component
1. Project
A simple JavaScript modal component for React Native.
2. Project technologies
3. Project prerequisites
4. Project installation
Install all the dependencies :
npm i @del83/plugin_modal_p14
Import it into the project :
import Modal from "@del83/plugin_modal_p14/dist";
5. Project starting
Start using the front-end
yarn start
6. Examples
Perhaps better than long paragraphs, here's a quick preview of what you could achieve with plugin_modal_p14 in a few lines of code:
import Modal from "../lib/index.js";
import React, { useState } from "react";
export default function App() {
const [displayModal, setDisplayModal] = useState(false);
const [messageModal, setMessageModal] = useState("");
const handleModal = () => {
if (displayModal) {
setDisplayModal(false);
return;
} else {
setMessageModal("The modal window is open");
setDisplayModal(true);
return;
}
};
return (
<div style={{ width: 640, marginTop: "45px" }}>
<header>
<h1>react-modal</h1>
<h2>An accessible React modal dialog component</h2>
</header>
<main >
<button className="button-open" onClick={handleModal}>Open Modal</button>
<Modal
displayModal={displayModal}
setDisplayModal={setDisplayModal}
messageModal={messageModal}
/>
</main>
<footer>
<p>Copyright © 2022 - Plugin created by Delphine Pennehouat</p>
</footer>
</div>
);
}
7. Props
Label | Type | Required | Default |
---|---|---|---|
displayModal | boolean | Yes | False |
setDisplayModal | callback() | Yes | N/A |
messageModal | string | Yes | N/A |