useLivePreviewPanelState

useLivePreviewPanelState(props): object

Defined in: packages/react/src/livePreview/useLivePreviewPanelState.ts:114

Tracks whether the live-preview panel is open for one collection or global.

Two kinds of change drive isOpen:

• Explicit — the user clicks the header button or the ⋯ menu item (toggle). Persisted in a cookie so a page refresh at desktop width reopens it instantly instead of flashing closed then open, and clears the “was auto-closed” memory below — any explicit choice sticks until the user changes it again.
• Automatic — crossing the mobile breakpoint (props.isMobile flipping). Narrowing past it while open auto-closes the panel instead of letting a desktop split panel render as a full-screen takeover, and remembers that the close was automatic; widening back past it reopens the panel ONLY if that memory is still set, i.e. the user has not explicitly opened or closed it while narrow. Automatic transitions never touch the cookie — only toggle() does.

The cookie is READ server-side by NextAdminPage via readLivePreviewPanelCookie from @vexcms/core — that helper cannot live in this module, which is client-only.

Parameters

props

basePath

string

The project’s config.basePath — the cookie’s Path attribute.

enabled

boolean

Whether live preview is configured for this slug. When false the panel stays closed and a stale open cookie is reset to closed.

initialOpen

boolean

The server-read cookie-or-default value, threaded down from NextAdminPage.

isMobile

boolean

Whether the viewport is currently below the mobile breakpoint (useIsMobile()). Consulted only to detect breakpoint crossings between renders — the caller still decides what to render (split panel vs. mobile overlay) at each width.

scope

LivePreviewPanelScope

"collection" writes into vex-admin:<slug>’s own livePreview field; "global" writes into the single shared vex-admin cookie’s livePreview field instead (Decision 51 — only one global edit view is ever open at a time, so globals share one live-preview panel state rather than each getting its own cookie).

slug

string

Scopes the cookie per collection/global.

Returns

object

isOpen and a toggle function that flips it and rewrites the cookie.

isOpen

isOpen: boolean

toggle

toggle: () => void

Returns

void