<Collection className collection collectionTemplates storyTemplates interstitial />


# <Collection className collection collectionTemplates storyTemplates interstitial />

This component can be used to render a collection.

This component will render each item in the collection recursively

  • If the item is a story, then the story is generated using the template returned by props.storyTemplates(index)
  • If the item is a collection, then the collection is rendered using the template returned by props.collectionTemplates(layout, index), where layout comes from item["associated-metadata"]["layout"]

Typically, this component will be passed a collection representing an entire page (either the home or section page), and will render the entire page for you.

Also see LazyCollection for a component which behaves similarly, but loads lazily after a point. Example

import {Collection} from '@quintype/components'

// collection = Collection.getCollectionBySlug(client, 'home', {}, {depth: 1})

function TwoColLayout({collection, associatedMetadata, index}) {
  // for item in collection.item
  //   if item.type == story
  //     showStory
  //   else if item.type == colection
  //     <Collection />
  // speed = associatedMetadata.scroll_speed

function collectionTemplates(layout, index) {
  if(layout == 'twoColLayout')
    return TwoColLayout;

// optional
function storyTemplates(index) {
  return StoryTemplate;

// optional
function interstitial(index) {
  if(index % 2 == 0)
    return <AdComponent />

<Collection collection={collection}
            interstitial={interstitial} />
Name Type Required Description Default
className string No
collection object No
collectionTemplates func No () => CollectionNotImplemented
storyTemplates func No () => StoryNotImplemented
interstitial func No () => undefined

View Source components/collection.js, line 54