prismicio/prismic-next

Add `fallback` prop to `<PrismicNextImage>`

Closed this issue · 1 comments

Is your feature request related to a problem? Please describe.

Rendering a fallback component is a common pattern when a Prismic field is empty. This pattern allows a developer to specify, for example, a default background image while allowing a content manager to provide an override image in Prismic.

We already have a fallback prop for
@prismicio/react's <PrismicRichText> and <PrismicText> components, but we don't have it for <PrismicNextImage>.

Describe the solution you'd like

The fallback prop could act just like <PrismicRichText>'s fallback prop. Any ReactNode value could be given and rendered as a fallback, including next/image if desired.

import { PrismicNextImage } from '@prismicio/next'

<PrismicNextImage
  field={imageField}
  fallback={<p>No image</p>}
/>

If imageField is empty, as determined by @prismicio/helpers's isFilled.image() function, fallback will be rendered instead.

Describe alternatives you've considered

Rendering a fallback value can be accomplished today using @prismicio/helpers's isFilled.image() helper. Although this works, the solution is verbose and requires manually using an additional package.

import * as prismicH from '@prismicio/helpers'
import { PrismicNextImage } from '@prismicio/next'

{
  prismicH.isFilled.image(imageField) ? (
    <PrismicNextImage field={imageField} />
  ) : (
    <p>No image</p>
  )
}

Additional context

Requested by @a-trost

This is included in PR #48 and will be released as part of v1.0.