Story

Description

The Story component is a React component that manages and renders a single story with a preview and pages. It utilizes multiple hooks to access context values and handle story transitions, preview, and pages rendering. The component conditionally manages various events such as opening, closing the story in viewer.

Properties

Component

Below are the properties and events available for the Story component:

Property	Type	Description
`as`	`React.ElementType`	Specifies the component type to render (by default, `"div"`).
`duration`	`number`	Duration of the each page of story in milliseconds.
`preload`	`boolean`	Determines whether the story should be preloaded (by default, `false`).
`start`	`number`	Starting page of the story when opened.
`...events`	`StoryEvents`	Optional callback events for component.
`...props`	`React.HTMLAttributes`	Standard div attributes.

Events

Event	Type	Description
`onOpen`	`Function`	Function to be called when the story is opened in viewer. If the function returns a `truthy` value, then the function will prevent function to hide the Preview.
`onClose`	`Function`	Function to be called when the story is closed in viewer. If the function returns a `truthy` value, then the function will prevent function to show the Preview.

Contexts Available

Usage

<Story
  preload
  duration={20000}
  start={1}
  onOpen={() => console.debug("Story opened!")}
  onClose={() => console.debug("Story closed!")}
>
  <Pages>
    <Page>Page with index #0</Page>
    <Page>Page with index #1</Page>
    <Page>Page with index #2</Page>
  </Pages>
</Story>

Demo

Stories Preview