Components

InfiniteStoryBase

InfiniteStoryBase()

This component can be used to implement InfiniteScroll on the story page. You will need to specify the function which renders the story (which will recieve props.index and props.story), and functions for triggering analytics.

Example

import React from 'react';

import { BlankStory } from './story-templates';
import { InfiniteStoryBase } from '@quintype/components';

function StoryPageBase({index, story, otherProp}) {
  // Can switch to a different template based story-template, or only show a spoiler if index > 0
  return <BlankStory story={story} />
}

const FIELDS = "id,headline,slug,url,hero-image-s3-key,hero-image-metadata,first-published-at,last-published-at,alternative,published-at,author-name,author-id,sections,story-template,tags,cards";
function storyPageLoadItems(pageNumber) {
  return global.superagent
           .get("/api/v1/stories", {fields: FIELDS, limit:5, offset:5*pageNumber})
           .then(response => response.body.stories.map(story => ({story: story, otherProp: "value"})));
}

export function StoryPage(props) {
  return <InfiniteStoryBase {...props}
                            render={StoryPageBase}
                            loadItems={storyPageLoadItems}
                            onItemFocus={(item) => console.log(`Story In View: ${item.story.headline}`)}
                            onInitialItemFocus={(item) => console.log(`Do Analytics ${item.story.headline}`)} />
}

Not changing the URL on every page

When the next story is focussed, the url and title of the page will be set to the next story. If this is not required, it can be disabled by setting the prop doNotChangeUrl={true}. This is typically used when showing the original story, followed by previews of subsequent stories.

Example:

  <InfiniteStoryBase {...props}
                     render={StoryPageBase}
                     loadItems={storyPageLoadItems}
                     onItemFocus={(item) => console.log(`Story In View: ${item.story.headline}`)}
                     doNotChangeUrl={true} />