API Documentation
Tutorials
Using ResponsiveImage

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} />

Configuring the the url to change

When a story is focussed, the url is changed to the original slug of the story by default. To configure this, pass a prop called changeUrlTo as a function which returns the desired url. This is typically used when you want to change the url but not to the original slug.

Example:

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