> For the complete documentation index, see [llms.txt](https://docs.navigaglobal.com/dashboard-plugin/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.navigaglobal.com/dashboard-plugin/api-and-gui/api/usemodal.md).

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.navigaglobal.com/dashboard-plugin/api-and-gui/api/usemodal.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.