Rich Text Components - defining types problem

Developing with Prismic
1

Hi All,

I have a problem giving the Rich Text Components a type using @prismicio/types library. I want to define the strong, h1, h2, h3, etc., and give each the right prop type.

The documentation is pretty minimalistic and confusing.

This is the code App.tsx:

import React from "react";

import "../styles/globals.css";

import Link from "next/link";
import type { AppProps } from "next/app";

import { PrismicLink, PrismicProvider } from "@prismicio/react";
import { PrismicPreview } from "@prismicio/next";
import { repositoryName } from "../prismicio";

import * as prismicT from "@prismicio/types";

const richTextComponents = {
  strong: ({ children }: { children: prismicT.RTStrongNode }) => (
    <strong className="font-semibold">{children}</strong>
  ),
};

const App = ({ Component, pageProps }: AppProps) => (
  <PrismicProvider
    richTextComponents={richTextComponents}
    internalLinkComponent={({ href, ...props }) => (
      <Link href={href}>
        <a {...props} />
      </Link>
    )}
  >
    <PrismicPreview repositoryName={repositoryName}>
      <Component {...pageProps} />
    </PrismicPreview>
  </PrismicProvider>
);

export default App;

Am I doing something wrong or using it wrong? :smiley:

3

Hi Nino,

@prismicio/react exports a JSXMapSerializer type that would allow you to type everything in one go:

import type { JSXMapSerializer } from "@prismicio/react";

const richTextComponents: JSXMapSerializer = {
  strong: ({ children }) => (<strong className="...">{ children }</string>)
};

Similarly, (for non React serializers), @prismicio/helpers exports an HTMLMapSerializer type that allows you to type the same map but return HTML instead.

1 Like