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

Table of Contents

• Installation
• Prerequisites
• Usage
• License

Installation

npm install react-ts-modal-cserizay

Prerequisites

• React 18.2.0
• react-dom 18.2.0
• Node.js v18
• TypeScript 5+
• npm 8+

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>
	);
};

License

MIT

This project was created by [Clément Serizay] for OpenClassrooms Project 14.