Modal

ModalBase component creates a portal to the portalElement element.
The Popover component based on a ModalBase sets the position of the modal's children to AnchorComponent or the result of getAnchorElement.
The Modal component based on a ModalBase sets a Paper as the modal's root child.

Props

ModalBase

Name	Type	Default	Description
getPortalElement	function		This function return a HTML element. The container will have the portal children appended to it.
portalElement	HTML element	themeContext.rootContainer or document.body	If there is no results from `getPortalElement` use this for HTML element for the container of the portal.
scrollElement	HTML element	document.body	The scrolling will disabled when the portal is open
open	bool	false	Initial value of the `open` state
Component	element type	Container	The component used for the Modal root Component node. Either a string to use a HTML element or a component.
ComponentProps	object		Passing props to the `PaperComponent`
BackdropComponent	element type	'div'	The component used for backdrop node. Either a string to use a HTML element or a component.
BackdropComponentProps	object		Passing props to the `BackdropComponent`
ContentComponent	element type	'div'	The component used for children parent node. Either a string to use a HTML element or a component.
ContentComponentProps	object		Passing props to the `BackdropComponent`
children	node		The content of the component.
effect	function		This function will be called back - when the component mounted - with an `{actions}` input that contains `actions.setOpen(value)`, `actions.toggleOpen()` and `actions.getOpen()` function.
keepMounted	bool	false	If `true` the content will mounted even if the open state is `false`
isMounted	bool		`isMounted` initial state, if it is together with keepMounted, component is already rendered at initialization
waitBeforeClose	number	0	It waits for the specified ms before closing
disableScroll	bool	true	If `true`, disables scrollbar
onOpen	function		This function will be called after the modal was opened.
onClose	function		This function will be called after the modal was closed.

Popover

Props of the ModalBase component are also available.

Name	Type	Default	Description
getAnchorElement	function		This function return a HTML element. This container will the anchor node for the positioning.
AnchorComponent	element type	'div'	The component used for the anchor node. Either a string to use a HTML element or a component.
AnchorComponentProps	object		Passing props to the `AnchorComponent`.
popperOptions	object		Passing props to PopperJs createPopper function.
beforeOpen	function		This function will be called before opening the modal.
beforeClose	function		This function will be called before closing the modal.
onOpen	function		This function will be called after the modal was opened.
onClose	function		This function will be called after the modal was closed.
effect	function		This function will be called back - when the component mounted - with `{popper: {...}, modal: {...}, anchor: {...}, content: {...}}` input. Popper contains instance by `createPopper`. Modal contains modified `actions.setOpen(value)`, `actions.toggleOpen()` functions with update popper positioning. And contain `current` object for the ref from the root Component of the Modal. Anchor is the `ref` to the `AnchorComponent`. Content is the `ref` to the `ContentComponent` of the Modal.

Modal

Props of the ModalBase component are also available.

Name	Type	Default	Description
PaperComponent	element type	Paper	The component used for the root node. Either a string to use a HTML element or a component.
PaperComponentProps	object	{'container-type':'root-page', ContentComponent: 'Modal', color:'paper1'}	Passing props to the `PaperComponent`.
ContentComponent	element type	Paper	The component used for the modal's content node. Either a string to use a HTML element or a component.
ContentComponentProps	object	{elevation: 0, color: 'paper3', style: {borderRadius: 0}}	Passing props to the `ContentComponent`.
beforeOpen	function		This function will be called before opening the modal.
beforeClose	function		This function will be called before closing the modal.
onOpen	function		This function will be called after the modal was opened.
onClose	function		This function will be called after the modal was closed.
effect	function		This function will be called back - when the component mounted - with `{actions: {...}, current: {}}` input. Actions contains modified `actions.setOpen(value)`, `actions.toggleOpen()` functions with update onOpen, onClose, beforeOpen, beforeClose hooks.
backdropComponentClickIsClose	bool	true	Set to false if disable closing modal on backdrop clicking

The ref is forwarded to the root Paper component.

Drawer

Props of the ModalBase component are also available.

Name	Type	Default	Description
PaperComponent	element type	Paper	The component used for the root node. Either a string to use a HTML element or a component.
PaperComponentProps	object	{'container-type':'root-page', ContentComponent: 'Drawer', color:'paper1'}	Passing props to the `PaperComponent`.
ContentComponent	element type	Paper	The component used for the modal's content node. Either a string to use a HTML element or a component.
ContentComponentProps	object	{elevation: 0, color: 'paper3', style: {borderRadius: 0}}	Passing props to the `ContentComponent`.
beforeOpen	function		This function will be called before opening the modal.
beforeClose	function		This function will be called before closing the modal.
onOpen	function		This function will be called after the modal was opened.
onClose	function		This function will be called after the modal was closed.
effect	function		This function will be called back - when the component mounted - with `{actions: {...}, current: {}}` input. Actions contains modified `actions.setOpen(value)`, `actions.toggleOpen()` functions with update onOpen, onClose, beforeOpen, beforeClose hooks.
backdropComponentClickIsClose	bool	true	Set to false if disable closing modal on backdrop clicking
keepMounted	bool	true	If `true` the content will mounted even if the open state is `false`
waitBeforeClose	number	`keepMounted ? 500 : 0`	It waits for the specified ms before closing

The ref is forwarded to the root Paper component.

Examples

Two example dialogs

const modal1 = useRef();

const forModal1 = {
    modalProps: {
        effect: ({ actions }) => {
            modal1.actions = actions;
        },
    },
    openButtonProps: {
        onClick: ()=>{
            modal1.actions.setOpen(true)
        },
        label: 'Open long content'
    },
    closeButtonProps: {
        onClick: ()=>{
            modal1.actions.setOpen(false)
        },
        variant:'contained',
        size:'large'
    },
    content: longContent,
    title: 'Long content'
}

const modal2 = useRef();

const forModal2 = {
    modalProps: {
        effect: ({ actions }) => {
            modal2.actions = actions;
        },
    },
    openButtonProps: {
        onClick: () => {
            modal2.actions.setOpen(true)
        },
        label: 'Open short content'
    },
    closeButtonProps: {
        onClick: () => {
            modal2.actions.setOpen(false)
        },
        variant:'contained',
        size:'large'
    },
    content: shortContent,
    title: 'Short content'
}

jsx

Drawer

const drawer = useRef();

const forDrawer = {
    modalProps: {
        effect: ({ actions }) => {
            drawer.actions = actions;
        },
    },
    openButtonProps: {
        _onClick: () => {
            drawer.actions.setOpen(true)
        },
        label: 'Drawer'
    },
    closeButtonProps: {
        _onClick: () => {
            drawer.actions.setOpen(false)
        },
        variant:'text',
        size:'large'
    },
    content: shortContent,
    title: 'Drawer'
}

A React based UI kit for DIGBY Design

Modal

Props

ModalBase

Popover

Modal

Drawer

Examples

ver: iyx6hb