# Rich Text Components - defining types problem

**URL:** <https://community.prismic.io/t/rich-text-components-defining-types-problem/11218>\
**Category:** Developing with Prismic\
**Tags:** typescript\
**Created:** [September 28, 2022, 9:18pm UTC](https://community.prismic.io/t/rich-text-components-defining-types-problem/11218 "2022-09-28T21:18:40Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![nino](https://avatars.discourse-cdn.com/v4/letter/n/b9bd4f/32.png) [@nino](https://community.prismic.io/u/nino)\
**Post date:** [September 28, 2022, 9:18pm UTC](https://community.prismic.io/t/rich-text-components-defining-types-problem/11218/1 "2022-09-28T21:18:40Z")

</div>

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:

```auto
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? 😃

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [October 13, 2022, 4:50pm UTC](https://community.prismic.io/t/rich-text-components-defining-types-problem/11218/3 "2022-10-13T16:50:17Z")

</div>

Hi Nino,

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

```auto
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.