diff --git a/examples/with-typescript/index.tsx b/examples/with-typescript/index.tsx index 666d694..a9df9a7 100644 --- a/examples/with-typescript/index.tsx +++ b/examples/with-typescript/index.tsx @@ -102,3 +102,22 @@ export const WithSliceZone = (): ReactNode => { /> ) } + +// Rendering a Slice Zone with a specific context contract looks like this. +// Note that the `context` prop is required when the `SliceZone` is supplied with a generic. +type RichContext = { name: string; age: number }; +export const WithContextRichSliceZone = (): ReactNode => { + return ( + + slices={page.data.slices} + components={{ + hero: () =>
Hero Slice
, + call_to_action: () =>
Call to Action Slice
, + }} + context={{ + name: "Bo", + age: 25, + }} + /> + ) +} diff --git a/src/SliceZone.tsx b/src/SliceZone.tsx index 8a2e3e8..e1a99de 100644 --- a/src/SliceZone.tsx +++ b/src/SliceZone.tsx @@ -1,6 +1,6 @@ import type { Slice } from "@prismicio/client" import { DEV } from "esm-env" -import type { ComponentType, FC, ReactNode } from "react" +import type { ComponentType, ReactNode } from "react" /** * Returns the type of a `SliceLike` type. @@ -150,8 +150,7 @@ export type SliceZoneProps = { defaultComponent?: ComponentType> /** Arbitrary data made available to all slice components. */ - context?: TContext -} +} & (unknown extends TContext ? { context?: TContext } : { context: TContext }) /** * This slice component can be used as a reminder to provide a proper implementation. @@ -190,7 +189,7 @@ export const TODOSliceComponent = ({ * * @see Learn how to create slices, use slice variations, and display slices: {@link https://prismic.io/docs/slices} */ -export const SliceZone: FC = (props) => { +export const SliceZone = (props: SliceZoneProps): ReactNode | Promise => { const { slices = [], components = {}, defaultComponent, context = {} } = props const renderedSlices = slices.map((slice, index) => {