React Dialog Window

---

Add to index.html <div id="modal-root"></div>. Pass the specified id to elementId.

import { useDialogWindow } from "react-dialog-window";

Create an object with the settings:

const settings = {
    elementId: "modal-root",
    position: "center",
    blackout: true,
    title: "Title",
    color: "gray",
    text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
    buttons: {
        onSuccess: (e) => {
            console.log("onSuccess: ", e)
        },
        onReject: () => {
            console.log("onReject")
        }
    }
}

Pass the settings to the hook:
const { open } = useDialogWindow(settings);

<button onClick={open}>open</button>

Settings

props	type	values	default	description	required
elementId	string	-	-	-	yes
backgroundColor	string	-	white	Background color of the dialog box	not
blackout	boolean	true or false	false	Enable background dimming	not
position	string	top or center	top	Dialog box position	not
title	string	-	-	Title text	not
titleColor	string	-	-	Title color	not
text	string	-	-	Text	not
type	string	alert, confirm or prompt	confirm	Type of dialog box	not
animated	boolean	true or false	true	Enable animation	not
children	React.ReactNode	-	-	JSX component	not
color	string	-	-	Text color	not
buttons	Object	-	-	The button configuration object. Any of the standard buttons in the current implementation closes the dialog box.	not
buttons.titleSuccess	string	-	Ok	Success button title	not
buttons.titleReject	string	-	Cancel	Cancel button title	not
buttons.backgroundColor	string	-	#027ad6	Background color of buttons	not
buttons.onSuccess	handler	-	-	Success Button Handler	not
buttons.onReject	handler	-	-	Cancel button Handler	not
buttons.color	string	-	white	Button text color	not