# 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

```jsx
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
```

{% hint style="info" %}
useModal() is only available as long as your component is rendered as a child inside the Dashboard modal.
{% endhint %}

## 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 |

```jsx
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)
...
```