React-ts-modal-cserizay NPM

react-ts-modal-cserizay - Modal creation & management in React (compatible with TypeScript)

Installation
Prerequisites
Usage
License

Installation

npm install react-ts-modal-cserizay

Prerequisites

Usages

import { useState } from 'react';
import { ModalWindow } from 'react-ts-modal-cserizay';

const RandomReactComponent = () => {
	// Create a state to manage the modal's state
	const [isOpen, setIsOpen] = useState(false);

	// Create a function to open the modal
	const handleOpen = () => {
		setIsOpen(true);
	};

	// Create a function to close the modal
	const handleClose = () => {
		setIsOpen(false);
	};

	return (
		<div>
			<button onClick={handleOpen}>Open Modal</button>

			<ModalWindow isOpen={isOpen} onClose={handleClose}>
				<p>You successfully opened the modal!</p>
			</ModalWindow>
		</div>
	);
};

&& another example

import { useState } from 'react';
import { ModalWindow } from 'react-ts-modal-cserizay';

const AnotherRandomReactComponent = () => {
	const [isOpen, setIsOpen] = useState(false);

	const handleClose = () => {
		setIsOpen(false);
	};

	return (
		<div>
			<ModalWindow isOpen={isOpen} onClose={handleClose}>
				<p>Are you sure you want to quit?</p>
				<button onClick={handleClose}>Yes, close the modal.</button>
			</ModalWindow>
		</div>
	);
};