# useSheet

useSheet is a helper hook will returns sheet's component context-api

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

## How to use

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

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

export default MyCustomComponent
```

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

## Available methods

| name             | type     | description                                                      |
| ---------------- | -------- | ---------------------------------------------------------------- |
| open             | function | open the sheet                                                   |
| close            | function | close the sheet                                                  |
| isOpen           | boolean  | boolean value to check if the sheet is open or not               |
| setTitle         | function | set the title of the sheet in the top header                     |
| setCloseOnESC    | function | set if the sheet should be close when the user press the ESC key |
| setHeaderButtons | function | set a custom header buttons components                           |
| setFooterButtons | function | set a custom footer buttons components                           |
| DOM\_NODE        | DOM      | the DOM element of the sheet wrapper                             |