mui-react-modal

Creating a Custom Modal and Dialog Component with MUI (Material-UI) in React for Enhanced User Experience.

Install

Using npm

npm i mui-react-modal

Using yarn

yarn add mui-react-modal

Basic Usage for modal

import React, { useState } from 'react';
import { Modal } from 'mui-react-modal';
import { Button } from '@mui/material';

export default function Test() {
    const [open, setOpen] = useState(false);

    const handleModal = () => setOpen(!open);

    const modalAction = <Button variant='outlined' size='small'>Save</Button>
    
    return (
        <>
            <Button onClick={handleModal}>Open Modal</Button>
            <Modal
                open={open}
                title={"Modal heading"}
                description={"Modal description."}
                close={handleModal}
                action={modalAction}
                actionPosition="right"
            />
        </>
    )
}

API & Supported parameters for modal

Property	Type	Default	Required	Description
open	Boolean	false	true	Controls whether the modal is open or closed.
close	Function	null	false	A function to close the modal.
title	String || Element	null	false	Show modal title.
description	String || Element	null	false	Show modal description.
action	Element	null	false	The element to be used as the modal's action button(s).
closeIcon	Boolean	true	false	Determines whether the modal close icon is visible.
customStyle	Object	Object	false	A style object that allows customization of the modal's default style.
actionPosition	String	left	false	The position of the action element(s) within the modal. Supported values are "left" "center"and"right".
modalRootClass	String	null	false	A CSS class name to modify the default style of the modal root.
closeIconRootClass	String	null	false	A CSS class name to modify the default style of the close icon.
titleRootClass	String	null	false	A CSS class name to modify the default style of the modal title.
descriptionRootClass	String	null	false	A CSS class name to modify the default style of the modal description.
actionRootClass	String	null	false	A CSS class name to modify the default style of the modal action element(s).
closeOnBackgroundCheck	Boolean	true	false	Make it false if you don't want to close modal on outside check or background check.

Basic Usage for dialog

import React, { useState } from 'react';
import { Dialog } from 'mui-react-modal';
import { Button } from '@mui/material';

export default function Test() {
    const [open, setOpen] = useState(false);

    const handleDialog = () => setOpen(!open);

    const dialogAction = <Button variant='outlined' size='small'>Save</Button>
    
    return (
        <>
            <Button onClick={handleDialog}>Open Dialog Box</Button>
            <Dialog
                open={open}
                title={"Dialog Box Heading"}
                description={"Dialog Box Description."}
                close={handleDialog}
                action={dialogAction}
                actionPosition="right"
            />
        </>
    )
}

API & Supported parameters for dialog

Property	Type	Default	Required	Description
open	Boolean	false	true	Controls whether the dialog is open or closed.
close	Function	null	false	A function to close the dialog.
title	String || Element	null	false	Show dialog title.
description	String || Element	null	false	Show dialog description.
action	Element	null	false	The element to be used as the dialog's action button(s).
dividers	Boolean	false	false	Controls whether to show dividers between sections in the dialog.
closeIcon	Boolean	true	false	Controls whether to show a close icon in the dialog header.
hideBackdrop	String	false	false	Controls whether to hide the backdrop when the dialog is open.
dialogTitleSx	Object	{}	false	Style object for the dialog title.
dialogContentSx	Object	{}	false	Style object for the dialog content.
dialogActionSx	Object	{}	false	Style object for the dialog actions.
dialogRootSx	Object	{}	false	Style object for the dialog root element.
closeIconSx	Object	{...}	false	Style object for the close icon.
fullScreen	Boolean	false	false	Controls whether the dialog should be displayed in full-screen mode.

Upcoming Features

We are dedicated to continuously enhancing the library to provide an even better user experience.

Contributing

Contributions are welcome! If you have any ideas, suggestions, or bug fixes, feel free to open an issue or submit a pull request.