Skip to content

use/useStickyStack

Overview

Shares the framework-owned sticky chrome stack between the layout-level StickyStackProvider and the active routed views. The provider calls useStickyStack() with no argument to establish and read the context (provider role); a view (usually via the StickyChrome component) calls useStickyStack(registration) to register a bar into a zone and receive the element to teleport its chrome into (view role). This mirrors usePageTitle: the provider owns where the chrome lives and how the stack lays out, while the view owns the chrome's content.

Two zones exist: top (bars pinned to the top of the scroll viewport) and bottom (pinned to the bottom). Within a zone the bars form an ordered stack (by order); each is an independent sticky element with its own reveal behavior, so the title can stay pinned while a filter toolbar hides on scroll-down and a form-action bar reveals on idle. Registrations coexist (no winner) and the provider lays them out; route transitions briefly show both the leaving and entering views' bars, which is fine since they simply stack until the leaving view unmounts and cleans up.

Methods

Types

StickyStackContext

StickyStackEntry

StickyStackRegistration

StickyReveal

StickyReveal = MaybeRefOrGetter

StickyZoneName

StickyZoneName = "top" | "bottom"

Source

client/lib/use/useStickyStack.js:1

Documents matching: server v3.0.0a1.post1client v3.0.0-alpha.2