MODAL WINDOW PLUGIN

React component

1. Project

A simple JavaScript modal component for React Native.

2. Project technologies

• React (18.2.0)
• Babel-cli (6.26.0)
• JSdoc (3.6.11)

3. Project prerequisites

• Node.js (12.18.0)
• Yarn (1.22.19)

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 |