tiny-modal-testy

A modal component for Reactjs application.

Installation

npm i tiny-modal-testy

Usage

The modal component is simple :

• Displays an array of messages
• Can be closed with a click on a top-right cross or outside.
• Can be customed with some css properties

Here is an usage example :

import { Modal } from "tiny-modal-testy";
import { useState } from "react";

export const MyComponent = () => {

    // A modal opening state
    const [isOpen, setIsOpen] = useState<boolean>(false);

    // You have to add an handler for the modal opening
    const handleModalOpening = (): void => {
        setIsOpen(!isOpen);
    };

    // You may want to add an handler for the modal closing
    const closeModal = (): void => {
        // do stuff
    };

    const getMessages = (): string[] => {
        return ["Employee successfully created !"];
    };

    // All of these are optional
    const modalCSSProperties = {
        zIndex: 1000,
        backgroundColor: "#eff9bd",
        color: "black",
        fontWeight: 400,
    };
    // All of these are optional
    const closeModalCSSProperties = {
        backgroundColor: "transparent",
        color: "#6c850f",
    };
    // If true, the background around the modal is darker
    const backgroundShadow: boolean = true;

    return (
        <main>
            <Modal
                isOpen={isOpen}
                modalMessages={getMessages()}
                closeModal={closeModal}
                modalCSSProperties={modalCSSProperties}
                closeModalCSSProperties={closeModalCSSProperties}
                backGroundShadow={backgroundShadow}
            />
        </main>
    );
};

Props details

| Prop | Type | Description | | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------: | | isOpen | boolean | If true, the modal is displayed | | modalMessages | string [] | The array of messages displayed in the modal | | closeModal | ()=>{void} | The function that closes the modal. You can add any other action you want to trigger when the modal is closed | | modalCSSProperties | modalCSSProperties : { zIndex?: number; backgroundColor?: string; color?: string; boxShadow? : string; fontWeight? : number} | Custom the modal style | | closeModalCSSProperties | closeModalCSSProperties : { backgroundColor?: string; color?: string } | custom the cross to close the modal | | backGroundShadow | boolean | If the background around the modal is darker or transparent |

License

MIT