Can I type React Children using Typescript?

Question

I'm using styled-components to build a message card component. I'm trying to make it have as little logic and take as few props as possible, so I'm using CSS to style any <p> or <svg> elements that are passed in as children like so:

I'm also using typescript and I'd like to ensure that the only element types passed in as children are a minimum of 1 paragraph element and 1 SVG element?

Something like this for example:

type = MessageCardProps = {
  children: [ JSXSVGElement?, JSXParagraphElement, JSXParagraphElement]
}

Robin · Accepted Answer · 2021-12-11 10:20:00Z

2

It is currently not possible to implement it the way you want. Unfortunately ReactElement loosens type checking as described here: How do I restrict the type of React Children in TypeScript, using the newly added support in TypeScript 2.3?

After all Reacts Composition to use the props to pass this to your component with the appropriate types:

import { ComponentPropsWithoutRef, PropsWithChildren } from "react";

type MessageCardProps = PropsWithChildren<{
  icon: ComponentPropsWithoutRef<"svg">;
  title: string;
}>;

function MessageCard({ icon, title, children }: MessageCardProps) {
  return <div>{icon}{title}{children}</div>;
}

export default function App() {
  return (
    <MessageCard icon={<svg></svg>} title="title">
      message
    </MessageCard>
  );
}

answered Dec 11, 2021 at 10:20

Robin

8,5909 gold badges66 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can I type React Children using Typescript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related