react-basic-modal-dialog
v0.1.4
Published
A simple modal dialog react component built with the HTML dialog element.
Downloads
5
Readme
React basic modal dialog
A simple modal dialog react component built with the HTML dialog element.
Disclaimer and acknowledgement
This package was created as a training project. The code is inspired from this article.
Features
- Generic
- Lightweight
- Accessible
- Closes with outside click or ESC key (consider adding a close button for accessibility)
- Easy to style
- Includes a ::backdrop pseudo-element for behind the element
Installation
Install the package from npm
$ npm install react-basic-modal-dialog
Examples
Basic example
import { useState } from "react";
import ModalDialog from "react-basic-modal-dialog";
export default function Example() {
// The only two required props for the modal dialog are isDialogVisible
// (to indicate whether the dialog should be visible or not) and closeDialog
// (a function setting isDialogVisible to false). Let's create them below.
const [isDialogVisible, setIsDialogVisible] = useState(false);
const openDialog = () => setIsDialogVisible(true);
const closeDialog = () => setIsDialogVisible(false);
// And here is a simple silly example of the modal dialog being used
return (
<>
<button onClick={openDialog}>Open modal dialog</button>
<ModalDialog isDialogVisible={isDialogVisible} closeDialog={closeDialog}>
<p>You can put whatever content you want here.</p>
<p>A button to close the dialog sounds like a good idea.</p>
<button onClick={closeDialog}>Close</button>
</ModalDialog>
</>
);
}
Styling with classes (using tailwind css in this example)
import { useState } from "react";
import ModalDialog from "react-basic-modal-dialog";
export default function Example() {
const [isDialogVisible, setIsDialogVisible] = useState(false);
const openDialog = () => setIsDialogVisible(true);
const closeDialog = () => setIsDialogVisible(false);
return (
<>
<button onClick={openDialog}>Open modal dialog</button>
<ModalDialog
isDialogVisible={isDialogVisible}
closeDialog={closeDialog}
dialogClassName="max-w-md rounded-xl p-0 backdrop:bg-black/60"
contentClassName="flex flex-col p-6 gap-2 justify-between items-center"
>
<h2 className="text-lg font-semibold">A dialog with class</h2>
<p className="text-sm text-gray-600 text-center">
I'm a dialog that's been styled using tailwind css classes
</p>
<button
className="w-full bg-gray-600 text-white font-semibold p-2.5 mt-4 rounded-lg"
onClick={closeDialog}
>
Close
</button>
</ModalDialog>
</>
);
}
Properties
<ModalDialog
isDialogVisible={
/* Boolean describing if the dialog should be shown or not */}
closeDialog={
/* Function that closes the dialog (sets isDialogVisible to false) */}
dialogClassName={
/* String with space-separated class names that will be applied to the dialog element */}
contentClassName={
/* String with space-separated class names that will be applied to the content div
inside the dialog element */}
>
</ModalDialog>