@times-stories/page

@times-stories/page

The page container for the @times-stories suite of packages

Installation

$ yarn add @times-stories/page

Usage

<Page> is the core primitive, and should be used as the children of the <Story /> component. It takes a function as its children passing on useful props:

props = {
  pageIndex // Number - the index of the current page
  isActive // Boolean - if this page is active
  isOutbound // Boolean - if this page is outbound
  isInbound // Boolean - if this page is inbound
  isUpcoming // Boolean - if this page is up next
  isMuted // Boolean - if the Story is muted
  withAnimations // Boolean - if animations are enabled in the Story
  handlers.setActivePage // Function(Number) - can be used to set the Story's active page
  handlers.toggleMuteState // Function - can be used to toggle the Story's mute state
}

This is required to map between the context-aware <Story> component, and a context-unaware template component such as <IntroductionPage>. You can also use this to create your own custom templates.

import Story from "@times-stories/story";
import Page from "@times-stories/page";

export default () => (
  <Story>
    <Page>
      {props => <IntroductionPage {...props} {...introductionProps} />}
    </Page>
    <Page>{props => <div>Your custom template that can use props</div>}</Page>
  </Story>
);