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

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

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

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)

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);