Documentation
Base
Configurable

Configurable

Description

This module provides a set of React components designed to configure various sections of a viewer context within your application. These components (Viewer, Story, Page, and Container) facilitate the configuration of sections and perform necessary side effects when their children or event props change.

List of components

  • Configurable.Container - used only to store other Configurable.Components
  • Configurable.Viewer - all children and events will be applied for viewing.
  • Configurable.Story - all children and events will be applied to the current story
  • Configurable.Page - all children and events will be applied to the current page

Properties

Components

PropertyTypeDescription
childrenReact.ReactNodeThe children elements to be used in the section configuration.
eventsReact.FunctionalComponent[]Optional event components to be configured in the section.

Story

Extends properties of common components

PropertyTypeDescription
mountOnPreloadbooleanMount components and events for preloaded stories, not just the current story. Make sure your components and events don't conflict with each other.

Page

Extends properties of common components

PropertyTypeDescription
mountOnPreloadbooleanMount components and events for preloaded pages, not just the current page. Make sure your components and events don't conflict with each other.

Usage

<Configurable.Container>
  <Configurable.Viewer events={events}>{...components}</Configurable.Viewer>
  <Configurable.Story events={events}>{...components}</Configurable.Story>
  <Configurable.Page events={events}>{...components}</Configurable.Page>
</Configurable.Container>

Demo

Viewer

<Configurable.Container>
  <Configurable.Viewer
    events={[
      Events.Mount.AutoClose,
      Events.Mount.Interactive,
      Events.Focus.Timer,
      Events.Keyboard.Close,
      Events.Keyboard.Stories
    ]}
  >
    <Controls.Viewer.Background />
    <Controls.Viewer.Close />
    <Controls.Stories.Next />
    <Controls.Stories.Previous />
    <Preloadable.Stories unloadable next={1} previous={1} />
    <Preloadable.Pages unloadable next={1} previous={1} />
  </Configurable.Viewer>
</Configurable.Container>

Features:

  • Click outside story for cause closing viewer
  • See close button of viewer in the upper right corner
  • See next and previous story buttons in opened viewer
  • Press next or previous story button on right/left-sides viewer and cause transition between stories
  • See in DOM-tree preloaded stories with pages
  • Wait until all stories are viewed for the device to close them

Story

<Configurable.Container>
  <Configurable.Story
    events={[
      Events.Pointer.Timer,
      Events.Pointer.Close,
      Events.Pointer.Stories
    ]}
  >
    <Controls.Pages.Next />
    <Controls.Pages.Previous />
    <Controls.Indicator interactive threshold={1000} />
  </Configurable.Story>
</Configurable.Container>

Features:

  • Press and hold the cursor over a story to pause the timer
  • Press and move the cursor down to close the viewer.
  • Press and move the cursor left or right to move between stories.
  • Click on the left or right border of a story to move between pages within a story.
  • See count of pages indicator above story
InstaStoriesStories