Title

Global

Methods

collectionToStories(collection) → {Array}

Use this function to get the stories from a collection object

Parameters:
Name Type Description
collection Collection

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

An array of stories

Array

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.

Example

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" />
Parameters:
Name Type Description
params Object
defaultNetworkID string

Network Id of the Ad Provider

config Object

Configuration of the ads (see example)

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)

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

A component that can

Component

withError(clazz, errorFn) → {Component}

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

Example

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

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

const MyStoryElement = withError(ComponentThatMayCrash, errorFunction)

<MyStoryElement/>
Parameters:
Name Type Description
clazz Component
errorFn function

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

A component with errors caught

Component

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

Example

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)
Parameters:
Name Type Description
klazz Component
updateData function

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

Component which can be used for preview

Component

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

Example:

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

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

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

A component which can be passed collection

Component