@times-stories/page
v1.0.8
Published
> The page container for the `@times-stories` suite of packages
Downloads
4
Keywords
Readme
@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>
);