React Simple Modal

About the project

This Modal component was initially created to meet a specific need in a personal project. However, aware of the value of component reusability, I designed it with the intention of making it adaptable and easily integrated into other projects.

Built with

Getting Started

Prerequisites

You need a package manager and React 17 or later.

• npm

  npm install npm@latest -g

• pnpm

  npm install -g pnpm

  Please refer to this documentation for more information.

Installation

npm

npm i @florian_/react-simple-modal

pnpm

pnpm add @florian_/react-simple-modal

Usage / Examples

The Modal component simply needs a state to indicate whether the modal window should be displayed or not, and a function to manage its closure.

import {
	Modal,
	ModalContent,
	ModalHeader,
	ModalTitle,
	ModalDescription,
	ModalClose,
	ModalFooter,
} from "@florian_/react-simple-modal";

function App() {
	const [isOpen, setIsOpen] = useState(false);

	const handleModal = () => setIsOpen(!isOpen);

	return (
		<>
			<button onClick={handleModal}>open</button>

			<Modal open={isOpen} onClose={handleModal}>
				<ModalContent>
					<ModalHeader>
						<ModalTitle>Login</ModalTitle>
						<ModalDescription>
							Lorem ipsum dolor sit amet consectetur adipisicing
							elit.
						</ModalDescription>
					</ModalHeader>

					<p>
						Lorem ipsum dolor sit amet consectetur, adipisicing
						elit. Quaerat explicabo dolor repellendus sed esse
						voluptatum velit. Voluptate at veniam corrupti nihil a
						aliquam omnis magnam, vitae aut expedita, earum illo!
					</p>

					<ModalFooter>
						<ModalClose>Close</ModalClose>
					</ModalFooter>
				</ModalContent>
			</Modal>
		</>
	);
}

export default App;

Props

| Name | Required | Default | Type | Example | | ------------ | -------- | --------- | --------------------------------- | ---------------------- | | open | yes | - | boolean | Click | | onClose | yes | - | function => void | Click | | onOpenChange | no | undefined | function(isOpen: boolean) => void | Click | | onCreate | no | undefined | function => void | Click | | autoFocus | no | true | boolean | Click | | restoreFocus | no | true | boolean | Click | | className | no | undefined | string | |

Props Examples

open

open the controlled open state of the dialog.

<Modal open={true}>...</Modal>

autoFocus

autoFocus focus the first focusable element in the modal.

<Modal open autoFocus>
	...
</Modal>

restoreFocus

restoreFocus restores focus on base element after closing modal.

<Modal open restoreFocus>
	...
</Modal>

onOpenChange

onOpenChange trigger when the open state of the dialog changes.

<Modal onOpenChange={(isOpen) => console.log(isOpen))}>...</Modal>

onClose

onClose triggers when the modal window closes.

<Modal onClose={() => console.log("onClose")}>...</Modal>

onCreate

onCreate trigger when component is create.

<Modal onCreate={() => console.log("onCreate")}>...</Modal>