Page

Description

The Page component represents a single page in a story. It manages its visibility, transitions, and interactions. This component leverages multiple hooks to handle context values and states, ensuring seamless integration and functionality within the story.

Properties

Component

Prop	Type	Description
`duration`	`number`	The duration of the page.
`preload`	`boolean`	Whether to preload the page.
`priority`	`boolean`	Whether the page has priority for visibility if page is disabled.
`as`	`React.ElementType`	Specifies the component type to render (by default, `article`)
`...events`	`StoryEvents`	Optional callback events for component.
`...props`	`React.HTMLAttributes`	Standard HTML Element attributes.

Events

Event	Type	Description
`onOpen`	`Function`	Function to be called when the page opens in viewer.
`onClose`	`Function`	Function to be called when the page closes in viewer.

States

Priority (classname: .instastories-page--priority)
Disabled (classname: .instastories-page--disabled)
- Component sets aria-disabled to true, by default.

Contexts Available

Usage

<Page
  preload
  priority
  duration={20000}
  onOpen={() => console.debug("Page opened!")}
  onClose={() => console.debug("Page closed!")}
>
  <h1>Page Content</h1>
</Page>

Demo

Pages ViewerContext