useModal

useModal is a helper hook will returns modal's component context-api

The modal context-api has methods to modify the opened modal, such like setting title, header, size...

How to use

import { Plugin } from '@root'
import { useEffect } from 'react'

const MyCustomComponent = props => {
    const modalAPI = Plugin.useModal()
    
    useEffect(() => {
        modalAPI.setTitle('My awesome modal')
    }, [])
    
    return (
        <div>
            <p>I am a child inside a Modal</p>
        </div>
    )
}

export default MyCustomComponent

useModal() is only available as long as your component is rendered as a child inside the Dashboard modal.

Available methods

name	type	description
setTitle	function	set the modal title of the top header
setMenu	function	set a menu component at the top left part of the modal
setSize	function	set modal size, available: AUTO, NORMAL, WIDE, FULL
setHeader	function	set if the modal should have a top header with the close icon or not
closeOnESC	function	set if the modal should be close when the user press the ESC key
addClass	function	set a className to the modal wrapper to style
injectStyle	function	UNDER DEVELOPMENT
closeOnClickOutSide	function	set if the modal should close when the user clicks outside the modal

import { Plugin } from '@root'

...
    const modalAPI = Plugin.useModal()
    
    modalAPI.setTitle('My awesome modal')
    modalAPI.setSize(Plugin.MODALSIZE.AUTO)
    modalAPI.setHeader(false)
    modalAPI.closeOnESC(false)
    modalAPI.addClass('my-plugin-class-name-moda-wrapper')
    modalAPI.closeOnClickOutSide(false)
    
    
    const items = [
        {
            id: 'modal-menu-item-1',
            content: 'Modal menu item 1'
        },
        {
            id: 'modal-menu-item-2',
            content: 'Modal menu item 2'
        }
    ]
    
    const modalMenu = (
        <List items={items}/>
    )
    
    modalAPI.setMenu(modalMenu)
...