@prismicio/react/dist/SliceZone.d.ts

React components and hooks to fetch and present Prismic content

import type { ComponentType, FC } from "react";
import type { Slice } from "@prismicio/client";
/**
 * Returns the type of a `SliceLike` type.
 *
 * @typeParam Slice - The Slice from which the type will be extracted.
 */
type ExtractSliceType<TSlice extends SliceLike> = TSlice extends Slice ? TSlice["slice_type"] : TSlice extends SliceLikeGraphQL ? TSlice["type"] : never;
/**
 * The minimum required properties to represent a Prismic Slice from the Prismic
 * Rest API V2 for the `unstable_mapSliceZone()` helper.
 *
 * @typeParam SliceType - Type name of the Slice.
 */
export type SliceLikeRestV2<TSliceType extends string = string> = Pick<Slice<TSliceType>, "id" | "slice_type">;
/**
 * The minimum required properties to represent a Prismic Slice from the Prismic
 * GraphQL API for the `unstable_mapSliceZone()` helper.
 *
 * @typeParam SliceType - Type name of the Slice.
 */
export type SliceLikeGraphQL<TSliceType extends string = string> = {
    type: Slice<TSliceType>["slice_type"];
};
/**
 * The minimum required properties to represent a Prismic Slice for the
 * `unstable_mapSliceZone()` helper.
 *
 * If using Prismic's Rest API V2, use the `Slice` export from
 * `@prismicio/client` for a full interface.
 *
 * @typeParam SliceType - Type name of the Slice.
 */
export type SliceLike<TSliceType extends string = string> = (SliceLikeRestV2<TSliceType> | SliceLikeGraphQL<TSliceType>) & {
    /**
     * If `true`, this Slice has been modified from its original value using a
     * mapper and `@prismicio/client`'s `mapSliceZone()`.
     *
     * @internal
     */
    __mapped?: true;
};
/**
 * A looser version of the `SliceZone` type from `@prismicio/client` using
 * `SliceLike`.
 *
 * If using Prismic's Rest API V2, use the `SliceZone` export from
 * `@prismicio/client` for the full type.
 *
 * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.
 */
export type SliceZoneLike<TSlice extends SliceLike = SliceLike> = readonly TSlice[];
/**
 * React props for a component rendering content from a Prismic Slice using the
 * `<SliceZone>` component.
 *
 * @typeParam TSlice - The Slice passed as a prop.
 * @typeParam TContext - Arbitrary data passed to `<SliceZone>` and made
 *   available to all Slice components.
 */
export type SliceComponentProps<TSlice extends SliceLike = SliceLike, TContext = unknown> = {
    /** Slice data for this component. */
    slice: TSlice;
    /** The index of the Slice in the Slice Zone. */
    index: number;
    /** All Slices from the Slice Zone to which the Slice belongs. */
    slices: SliceZoneLike<TSlice extends SliceLikeGraphQL ? SliceLikeGraphQL : SliceLikeRestV2>;
    /**
     * Arbitrary data passed to `<SliceZone>` and made available to all Slice
     * components.
     */
    context: TContext;
};
/**
 * A React component to be rendered for each instance of its Slice.
 *
 * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.
 * @typeParam TContext - Arbitrary data made available to all Slice components.
 */
export type SliceComponentType<TSlice extends SliceLike = any, TContext = unknown> = ComponentType<SliceComponentProps<TSlice, TContext>>;
/**
 * A record of Slice types mapped to a React component. The component will be
 * rendered for each instance of its Slice.
 *
 * @deprecated This type is no longer used by `@prismicio/react`. Prefer using
 *   `Record<string, SliceComponentType<any>>` instead.
 *
 * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.
 * @typeParam TContext - Arbitrary data made available to all Slice components.
 */
export type SliceZoneComponents<TSlice extends SliceLike = SliceLike, TContext = unknown> = {
    [SliceType in ExtractSliceType<TSlice>]: SliceComponentType<Extract<TSlice, SliceLike<SliceType>> extends never ? SliceLike : Extract<TSlice, SliceLike<SliceType>>, TContext>;
};
/**
 * React props for the `<SliceZone>` component.
 *
 * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.
 * @typeParam TContext - Arbitrary data made available to all Slice components.
 */
export type SliceZoneProps<TContext = unknown> = {
    /** List of Slice data from the Slice Zone. */
    slices?: SliceZoneLike;
    /** A record mapping Slice types to React components. */
    components?: Record<string, ComponentType<any>>;
    /**
     * The React component rendered if a component mapping from the `components`
     * prop cannot be found.
     */
    defaultComponent?: ComponentType<SliceComponentProps<any, TContext>>;
    /** Arbitrary data made available to all Slice components. */
    context?: TContext;
};
/**
 * This Slice component can be used as a reminder to provide a proper
 * implementation.
 *
 * This is also the default React component rendered when a component mapping
 * cannot be found in `<SliceZone>`.
 */
export declare const TODOSliceComponent: <TSlice extends SliceLike>({ slice, }: {
    slice: TSlice;
}) => import("react/jsx-runtime").JSX.Element | null;
/**
 * Renders content from a Prismic Slice Zone using React components for each
 * type of Slice.
 *
 * If a component is not provided for a type of Slice, a default component can
 * be provided. A fallback component is provided by default that will not be
 * rendered in a production build of your app.
 *
 * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.
 * @typeParam TContext - Arbitrary data made available to all Slice components.
 *
 * @returns The Slice Zone's content as React components.
 *
 * @see Learn about Prismic Slices and Slice Zones {@link https://prismic.io/docs/core-concepts/slices}
 */
export declare const SliceZone: FC<SliceZoneProps>;
export {};