@magma/modal-react

Table of Contents

• Description
• Technologies
• Install
• Usage
• Authors
• License

Description

The Modal React component provides a flexible and customizable modal window for use in React applications. With support for various configurations and styling options, this component allows developers to easily implement modal dialogs for displaying additional content, notifications, or interactive elements within their applications.

Technologies

• React V18.2.0
• React-Dom V18.2.0
• PropTypes V15.8.1
• NPM V10.2.3
• NodeJS V20.10.0
• VS Code V1.87.2

Install

To install, you can use npm or yarn:

$ npm install --save @magma73/modal-react

$ yarn add @magma73/modal-react

Usage

Example

import React, { useState } from 'react';
import { Modal } from '@magma73/modal-react';
import '@magma73/modal-react/dist/style.css';

const App = () => {

    const [lastActiveElement, setLastActiveElement] = useState(null);
    const [isModalOpen, setIsModalOpen] = useState(false);

    const openModal = () => {
        setLastActiveElement(document.activeElement);
        setIsModalOpen(true);
    };

    const closeModal = () => {
        setIsModalOpen(false)
        if (lastActiveElement) {
            lastActiveElement.focus();
        }
    };

    return (

    <>

    <button onClick={openModal}>Open modal</button>


    <Modal
        isOpen={isOpen}
        closeModal={closeModal}
        title="Employee Created"
        titleClose="Close"
    />

    </>

    )

}


export default App

Step by step

1. Import component and style file

import { Modal } from '@magma73/modal-react';
import '@magma73/modal-react/dist/style.css';

2. Create open/close state and save the currently active element with useState hook

import React, { useState } from 'react';

const App = () => {

    const [lastActiveElement, setLastActiveElement] = useState(null);
    const [isModalOpen, setIsModalOpen] = useState(false);

  ...

}

3. Create functions open/close

    const openModal = () => {
        setLastActiveElement(document.activeElement);
        setIsModalOpen(true);
    };

    const closeModal = () => {
        setIsModalOpen(false)
        if (lastActiveElement) {
            lastActiveElement.focus();
        }
    };

4. Add component in render with props

    <Modal
        isOpen={isOpen}
        closeModal={closeModal}
        title="Modal Component"
        titleClose="Close"
    />

5. Add children to the component

    <Modal
        isOpen={isOpen}
        closeModal={closeModal}
        title="Modal Component"
        titleClose="Close"
    >
        <p>Hello world !</p>
    </Modal>

6. Control modal by changing state

    <button onClick={openModal}>Open modal</button>

7. Choose to customize styles and modal

You can choose to :

• Display the icon with : showCloseIcon={false}
• Delete the style importation ~~import '@magma73/modal-react/dist/style.css';~~ and add your own style using : {styles.yourStyle}

    <Modal
        isOpen={isOpen}
        closeModal={closeModal}
        customModal={styles.modalContent}
        customContainerInformations={styles.containerInformations}
        customTitle={styles.title}
        customBtnClose={styles.btnClose}
        customIconClose={styles.picture}
        title="Your Message Has Been Sent"
        titleClose="Close the message"
        showCloseIcon={false}
    >
        <p>Hello world !</p>
    </Modal>

Authors

Marine Magnin

License

ISC © Marine Magnin