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

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

useSheet() is only available as long as your component is rendered as a child inside the sheet component.

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

Last updated