vz-react-modal
TypeScript icon, indicating that this package has built-in type declarations

1.0.7 • Public • Published

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.

React React DOM Documentation MIT licensed

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 Basic
Info Info
Success Success
Warning Warning
Error Error

Styling

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

License

MIT © Vinodh Zamboulingame

Package Sidebar

Install

npm i vz-react-modal

Weekly Downloads

3

Version

1.0.7

License

MIT

Unpacked Size

58.4 kB

Total Files

9

Last publish

Collaborators

  • vzamboulingame