vz-react-modal

This package is meant to be used for educational purpose. It is not intended to be maintained and could be deleted in the future.

About

A lightweight React modal component based on the HTML dialog element.

Install

# npm
npm install -D vz-react-modal

# yarn
yarn add -D vz-react-modal

# pnpm
pnpm add -D vz-react-modal

Usage

import { useState } from "react";
// Import the Modal component
import Modal from "vz-react-modal";

export default function App() {
  // Define state to track whether the modal is open or not
  const [isOpen, setIsOpen] = useState(false);

  // Add function to handle the close event of the modal
  const handleClose = () => {
    setIsOpen(false);
  };

  // Add function to handle the open event of the modal
  const handleClick = () => {
    setIsOpen(true);
  };

  return (
    <div
      style={{
        margin: "0 auto",
        textAlign: "center",
        minHeight: "100vh",
        padding: "1rem",
      }}>
      <p style={{ fontSize: "2rem", color: "#333", margin: "auto" }}>vz-react-modal</p>
      <button
        style={{
          backgroundColor: "#0074E4",
          padding: "0.5rem 1rem",
          fontWeight: "bold",
          color: "#fff",
          cursor: "pointer",
          borderRadius: "0.25rem",
          marginTop: "1rem",
        }}
        onClick={handleClick}>
        Open Modal
      </button>
      {/* Pass the props to the Modal component */}
      <Modal
        modalTitle="Modal title"
        modalMessage="Modal message"
        modalType="basic"
        isOpen={isOpen}
        handleClose={handleClose}
      />
    </div>
  );
}

Props

The vz-react-modal component accepts the following props:

| Name | Type | Description | | -------------- | ---------- | --------------------------------------------------------------------------------------- | | modalTitle | string | The title of the modal | | modalMessage | string | The message to be displayed in the modal | | modalType | string | The type of the modal (allowed values : "basic", "info", "success", "warning", "error") | | isOpen | boolean | A boolean indicating whether the modal is open or not | | handleClose | function | A function to handle the close event of the modal |

Examples

You can find below examples of the different modal types :

| Type | Example | | :-----: | :-------------------------------------------------------------------------------------------: | | Basic | | | Info | | | Success | | | Warning | | | Error | |

Styling

The vz-react-modal component is styled with Tailwind CSS.

License

MIT © Vinodh Zamboulingame