@react-visual/contentful v0.8.1

@react-visual/contentful

Renders Contentful images and videos into a container. Features:

• Automatically defines a loader functions for generating srcsets
• Supports responsive image and video assets

Install

yarn add @react-visual/contentful

Usage

Asset fields

import Visual from '@react-visual/contentful'

export default function Example() {
  return (
    <Visual
      image={ entry.image }
      video={ entry.video }
      sizes='100vw'/>
  )
}

Where image and video are asset fields defined by these GQL fragments:

fragment image on Asset {
  title
  description
  fileName
  width
  height
  url
}

fragment video on Asset {
  title
  description
  fileName
  url
}

Visual entryType reference

This is the expected pattern for rendering responsive images and videos.

import Visual from '@react-visual/contentful'

export default function Example() {
  return (
    <Visual
      src={ entry.background }
      sizes='100vw'/>
  )
}

Where background is defined by this GQL fragment (this consumes the previous fragments):

fragment visual on Visual {
  image { ...image }
  portraitImage { ...image }
  video { ...video }
  portraitVideo { ...video }
  alt
}

For more examples, read the Cypress component tests.

Props

Sources

Layout

Loading

Video

Accessibility

Theming