MODAL-REACTJS-ERKOMXTIL

This library is a react component, it's a simple modal.
The text inside the modal can be changed with the "text" parameter.

Installation

Run the following command :

      
        # If you use npm:
        npm i modal-reactjs-erkomxtil
      
        # If you use yarn:
        yarn add modal-reactjs-erkomxtil
      
    

Example

You'll need to import useState() and to set a constant like this : const [active, setActive] = useState()

You'll also need a button to activate the modal.

      
        import React, { useState } from 'react'
        import { Modal } from 'modal-reactjs-erkomxtil';

        function App(props) {
          const [active, setActive] = useState()
          return (
            <div>
            < >
              <button onClick={() => setActive("active")} >Open modal </button> 
              <Modal active={active} setActive={setActive} text="Test de la modale"/>
            </>            
            </div>
          );
        }

        export default App;
      
    

Sources

              
                import React from 'react';
                import "./modal.css"

                /**
                * 
                * @param {string} active this is the class of the container for the modal
                * @param {string} setActive this will set the class of the div to show or hide the modal. To show the modal set "active" and to hide it set ""
                * @param {string} text it allows you to put the text that you want in the modal
                * @returns {jsx} the modal
                */
                const Modal = ({ active, setActive, text }) => {
                  return (
                    <div className={`modalWrapper ${active ? "active": ""} `}>
                      <p>
                        {text}
                        <span onClick={() => setActive("")}>X</span>
                      </p>
                    </div>
                  );
                }
                export default Modal