1.0.7 • Published 7 months ago
vz-react-modal v1.0.7
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