Screen

Observe and control navigation within the app.

Pitfall

Users having multiple tabs open can lead to unexpected behavior.

This happens because navigation events are received from all connected clients.

Listen to navigation

// Listen to navigation
ctx.screen.onNavigate(e => {
    // User navigated to the 'One Piece' anime page
    console.log(e.pathname) // /entry
    console.log(e.searchParams) // { "id": "21" }
})

// Or as a state
const screen = ctx.screen.getState()
const isAnimeEntry = ctx.computed(() => screen.get().current === "entry", [screen])
isAnimeEntry.get()

Navigate

// Navigate to the 'Sakamoto Days' anime page
ctx.screen.navigateTo("/entry", { "id": "177709" })

Reload the screen

// Hard reload the webapp/desktop client screen.
ctx.screen.reload()

Get the current screen

Calling this will trigger onNavigate

This is useful if you want to know the current screen without having to wait for the user to navigate.

ctx.screen.loadCurrent()