), hyperlink: ({ node, children, key }) => ( {children} ), label: ({ node, children, key }) => ( {children} ), span: ({ text, key }) => { const result: React.ReactNode[] = []; let i = 0; for (const line of text.split("\n")) { if (i > 0) { result.push(
); } result.push({line}); i++; } return {result}; }, }} /> ``` ## `` ```tsx import { PrismicText } from "@prismicio/react"; ``` React component that renders content from a Prismic rich text or title field as plain text. ```tsx ``` A `fallback` prop can be provided to define what to render when the rich text or title field is empty. If a `fallback` prop is not given, `null` is rendered by default for an empty field. ```tsx ``` This component returns a React fragment with no wrapping element around the content. If you need a wrapper, add a component around ``. ```tsx

``` ## `` ```tsx import { PrismicLink } from "@prismicio/react"; ``` React component that renders a link from a Prismic link field or a Prismic document. It automatically resolves a field's link to a URL and renders the link's display text. It also applies the correct `target` and `rel` props if "Open in new tab" is enabled for the field. It also applies directly a link label if the property `text` is present ```tsx // With default text property // Overriding with custom children Click Me ``` To link to a document, use the document prop in place of the field prop. ```tsx Click me ``` By default, an `` HTML element is rendered for all links. If your React app requires a special `` component for internal links, such as one from `react-router-dom`, a component can be provided to the `internalComponent` prop. That component will automatically be rendered for internal links. ```tsx ``` The component for external links can similarly be overridden using the `externalComponent` prop. ```tsx } /> ``` To globally customize ``, create a wrapper component with your default props. Use the wrapper component in place of `@prismicio/react`'s version. ```tsx filename=src/components/PrismicLink.tsx import { PrismicLink as BasePrismicLink } from "@prismicio/react"; const InternalLink = (props) => { return ; }; export const PrismicLink = (props) => { return ; }; ``` If your app uses the [route resolver](https://prismic.io/docs/route-resolver.md) when querying for documents, providing a link resolver is optional. If your app does not use a route resolver or requires overriding a document's URL in specific cases, a link resolver can be provided using the `linkResolver` prop. ```tsx ``` ## `` ```tsx import { PrismicImage } from "@prismicio/react"; ``` React component that renders an optimized image from a Prismic image field. The rendered `` element contains a `srcset` with image URLs for common viewport widths. ```tsx ``` > Are you using a framework like Next.js or Gatsby? > > If you are using a framework like [Next.js](https://prismic.io/docs/nextjs.md) or [Gatsby](https://prismic.io/docs.md), prefer its framework-specific image integration over this ``. For example, use `@prismicio/next`'s [``](https://prismic.io/docs/technical-reference/prismicio-next#prismicnextimage) component or Gatsby's [`gatsby-plugin-image`](https://www.gatsbyjs.com/plugins/gatsby-plugin-image/) component if you are using those frameworks. > > Only use `` if your environment does not have a built-in optimized image component. The image CDN which Prismic serves all images through, [imgix](https://imgix.com/), allows image transformations using URL parameters. imgix URL parameters can be provided to `` using the `imgixParams` prop. ```tsx // Renders a grayscale image ``` See [imgix's Image URL API Reference](https://docs.imgix.com/apis/rendering) for a full list of the available parameters, including saturation changes, cropping, and blurring. The component automatically applies the image field’s alt text to the rendered `` element. To customize the alt text, use the `alt` prop. ```tsx ``` To provide a fallback alt text to be used if the image field does not contain alt text, use the `fallbackAlt` prop. ```tsx ``` **Note**: The `alt` and `fallbackAlt` props only accept an empty string (`''`) to let you [declare an image as decorative](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images). Any other value is invalid. See the [“`alt` must be an empty string”](https://github.com/prismicio/prismic-react/blob/master/messages/alt-must-be-an-empty-string.md) article for more details. By default, `` will use the following widths in its `srcset` attribute: `640, 750, 828, 1080, 1200, 1920, 2048, 3840`. To override these widths, use the `widths` prop. ```tsx ``` To use a pixel density-based `srcset` instead, pass a set of pixel densities to the `pixelDensities` prop. ```tsx ``` To use the built-in set of good default pixel densities, pass `pixelDensities='defaults'` to the component. The component uses `[1, 2, 3]` as its default pixel densities. ```tsx ``` ## `` ```ts import { SliceZone } from "@prismicio/react"; ``` React component that renders content from a Prismic slice zone using React components for each type of slice. For example, if a slice zone contains a Text slice followed by an Images slice, `` will render `` and `` in a list. ```tsx ``` Alongside the `slices` prop, an object of slice type IDs (for example: "text") mapped to its React component (for example: ``) should be provided to the `components` prop. Slice components receive four props: * `slice`: The slice object being rendered. * `index`: The index of the slice within the slice zone. * `slices`: The list of all slice objects in the slice zone. * `context`: Arbitrary data passed to the ``'s context prop. A slice component could look like this: ```tsx function TextSlice({ slice }) { return (

); } ``` If you have data that needs to be shared with all slice components, provide a value to the `context` prop. The data will be passed to each slice component as a `context` prop. ```tsx ``` You can then consume the prop in any slice component defined in the `components` array. ```tsx function TextSlice({ slice, context }) { return (

{context.foo}

); } ``` By default, a "TODO" component will be rendered with a warning if a component is not provided for a slice type. To override the default component, provide a component to the `defaultComponent` prop. The default component is passed the same props listed above. ```tsx null} /> ``` The default "TODO" component will not be rendered in production (i.e. when `process.env.NODE_ENV` is `production`). This component returns a React fragment with no wrapping element around the list of slice components. If you need a wrapper, add a component around ``. ```tsx

## `usePrismicClient()` A hook that returns the Prismic client provided to `` at the root of your React app. ```tsx const client = usePrismicClient(); ``` Use this hook to call methods directly on the client. For example, getting a list of all tags can be performed like this: ```tsx function MyComponent() { const [tags, setTags] = React.useState(); const client = usePrismicClient(); React.useEffect(() => { client.getTags().then((tags) => setTags(tags)); }, [client]); } ``` ## `usePrismicPreviewResolver(params)` A hook that returns the URL of a previewed document during a preview session. This hook should be used on your React app's preview resolver page. ```tsx const [resolvedURL, { state, error }] = usePrismicPreviewResolver(); ``` The hook will automatically read the preview session's URL parameters to resolve the previewed document's URL. If you pass a navigate option, the hook will automatically redirect the browser to the resolved URL. The navigate option should be a function that accepts a URL string and redirects the browser. Popular client-side routing libraries like [React Router](https://reactrouter.com/) provide this function to you. ```tsx import { useNavigate } from "react-router-dom"; const navigate = useNavigate(); usePrismicPreviewResolver({ navigate }); ```