# collectionToStories(collection) → {Array}

Use this function to get the stories from a collection object returns [] if collection doesn't have items key

Name Type Description
collection Collection

View Source components/wrap-collection-layout.js, line 118

An array of stories


# createDfpAdComponent(params) → {Component}

This is a function which can be used to manage ad units in a single place. A component must be created, and used with the adtype parameter. These ads are lazy-loaded and single-request mode is disabled by default which can be overwritten as follows.


import { createDfpAdComponent } from '@quintype/components';

export const CONFIG = {
  "homepage-2": { adUnit: "HP_728x90-3", sizes: [[728, 90], [320, 50]] },
  "homepage-3": { adUnit: "HP_728x90-3", sizes: [[728, 90], [320, 50]] },

export const DfpAd = createDfpAdComponent({
  defaultNetworkID: "123456789",
  config: CONFIG,
  targeting: function(state, ownProps) {
    const params = {};

    // if(storyIsSponsored) params['sponsor'] = storySponsor

    return params;
  // Only if you want to overwrite the existing values
  lazyLoad: false,
  singleRequest: true

<DfpAd adtype="homepage-2" />
Name Type Description
params Object
defaultNetworkID string

Network Id of the Ad Provider

config Object

Configuration of the ads (see example)

slotId string

A unique string identify the Ad slot

targeting function

Function which takes in the current state, props from the parent component and returns targetting parameters

collapseEmptyDivs boolean

(default true)

lazyLoad boolean

(default true)

singleRequest boolean

Run Dfp in Single Request Mode (default false)

deferAdsBy number

Defers loading of gpt.js script by the passed value in ms

View Source components/dfp-ad.js, line 47

A component that can


# withError(clazz, errorFn) → {Component}

This function can be used to generate a wrapper component that implements componentDidCatch().


import { withError } from '@quintype/components';

function errorFunction(props) {
  return <span />;

const MyStoryElement = withError(ComponentThatMayCrash, errorFunction)

Name Type Description
clazz Component
errorFn function

View Source components/with-error.js, line 27

A component with errors caught


# WithPreview(klazz, updateData) → {Component}

This higher order function can be used for the home or story page preview. It takes a component, and a function to map the story into props suitable for the component

Preview in the Quintype CMS works by sending a postMessage to an iframe every time the story changes. This file abstracts this for you, and will just render the given component


import { WithPreview, replaceAllStoriesInCollection } from '@quintype/components';
import { StoryPage } from '../pages/story';
import { HomePage } from '../pages/home';

function storyPageData(data, story) {
  return {...data, story, relatedStories: Array(5).fill(story)};

// Remember to update load-data.js for the initial data
function homePageData(data, story) {
  return {...data, collection: replaceAllStoriesInCollection(data.collection, story)};

export const StoryPreview = WithPreview(StoryPage, storyPageData);
export const HomePreview = WithPreview(HomePage, homePageData)
Name Type Description
klazz Component
updateData function

View Source components/with-preview.js, line 31

Component which can be used for preview


# wrapCollectionLayout(component) → {Component}

Use this function to wrap a UI for collections, which returns a component handling common behavior, such as only rendering client side, or lazy loading images. This component adds two props: stories and associatedMetadata


import { wrapCollectionLayout } from '@quintype/components';

function CollectionBase({stories = [], associatedMetadata = {}, collection}) {
  return <div>{stories.map(story => <div>{story.headline}</div>)}</div>
const Collection = wrapCollectionLayout(CollectionBase);
Name Type Description
component Component

View Source components/wrap-collection-layout.js, line 95

A component which can be passed collection