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

React components and hooks to fetch and present Prismic content

import { ComponentType, FC, ReactNode } from "react";
import { LinkResolverFunction, RichTextField } from "@prismicio/client";
import { RichTextFunctionSerializer, RichTextMapSerializer } from "@prismicio/client/richtext";
import { LinkProps } from "./PrismicLink.js";
/**
 * A function mapping Rich Text block types to React Components. It is used to
 * render Rich Text or Title fields.
 *
 * @see Templating rich text and title fields from Prismic {@link https://prismic.io/docs/technologies/templating-rich-text-and-title-fields-javascript}
 */
export type JSXFunctionSerializer = RichTextFunctionSerializer<ReactNode>;
/**
 * A map of Rich Text block types to React Components. It is used to render Rich
 * Text or Title fields.
 *
 * @see Templating Rich Text and Title fields from Prismic {@link https://prismic.io/docs/technologies/templating-rich-text-and-title-fields-javascript}
 */
export type JSXMapSerializer = RichTextMapSerializer<ReactNode>;
/** Props for `<PrismicRichText>`. */
export type PrismicRichTextProps = {
    /** The Prismic Rich Text field to render. */
    field: RichTextField | null | undefined;
    /**
     * The Link Resolver used to resolve links.
     *
     * @remarks
     * If your app uses Route Resolvers when querying for your Prismic
     * repository's content, a Link Resolver does not need to be provided.
     *
     * @see Learn about Link Resolvers and Route Resolvers {@link https://io/docs/core-concepts/link-resolver-route-resolver}
     */
    linkResolver?: LinkResolverFunction;
    /**
     * A map or function that maps a Rich Text block to a React component.
     *
     * @remarks
     * Prefer using a map serializer over the function serializer when possible.
     * The map serializer is simpler to maintain.
     *
     * @example A map serializer.
     *
     * ```jsx
     * {
     *   heading1: ({children}) => <Heading>{children}</Heading>
     * }
     * ```
     *
     * @example A function serializer.
     *
     * ```jsx
     * (type, node, content, children) => {
     * 	switch (type) {
     * 		case "heading1": {
     * 			return <Heading>{children}</Heading>;
     * 		}
     * 	}
     * };
     * ```
     */
    components?: JSXMapSerializer | JSXFunctionSerializer;
    /**
     * The React component rendered for links when the URL is internal.
     *
     * @defaultValue `<a>`
     */
    internalLinkComponent?: ComponentType<LinkProps>;
    /**
     * The React component rendered for links when the URL is external.
     *
     * @defaultValue `<a>`
     */
    externalLinkComponent?: ComponentType<LinkProps>;
    /**
     * The value to be rendered when the field is empty. If a fallback is not
     * given, `null` will be rendered.
     */
    fallback?: ReactNode;
};
/**
 * React component that renders content from a Prismic Rich Text field. By
 * default, HTML elements are rendered for each piece of content. A `heading1`
 * block will render an `<h1>` HTML element, for example. Links will use
 * `<PrismicLink>` by default which can be customized using the
 * `internalLinkComponent` and `externalLinkComponent` props.
 *
 * To customize the components that are rendered, provide a map or function
 * serializer to the `components` prop.
 *
 * @remarks
 * This component returns a React fragment with no wrapping element around the
 * content. If you need a wrapper, add a component around `<PrismicRichText>`.
 *
 * @example Rendering a Rich Text field using the default HTMl elements.
 *
 * ```jsx
 * <PrismicRichText field={document.data.content} />;
 * ```
 *
 * @example Rendering a Rich Text field using a custom set of React components.
 *
 * ```jsx
 * <PrismicRichText
 * 	field={document.data.content}
 * 	components={{
 * 		heading1: ({ children }) => <Heading>{children}</Heading>,
 * 	}}
 * />;
 * ```
 *
 * @param props - Props for the component.
 *
 * @returns The Rich Text field's content as React components.
 *
 * @see Learn about Rich Text fields {@link https://io/docs/core-concepts/rich-text-title}
 * @see Learn about Rich Text serializers {@link https://io/docs/core-concepts/html-serializer}
 */
export declare const PrismicRichText: FC<PrismicRichTextProps>;