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
.