Creating React Element Dynamically in Typescript

Question

I'm trying to create an element in React with Typescript based on the tagName passed as props, and I want to add relative element props based on that tagName. Here is my code.

type ElementProps<Tag extends keyof JSX.IntrinsicElements> =
  JSX.IntrinsicElements[Tag];

type Props = {
  tagName?: React.ComponentType | keyof JSX.IntrinsicElements;
};

const Editable: React.FC<Props> = ({
  tagName = 'div',
  ...props
}) => {
  const htmlEl = useRef(null);

  const elementProps: ElementProps<typeof tagName> = {
    ...props,
    ref: htmlEl,
  };

  return createElement(tagName, elementProps, children);
};

I'm getting this error

Type 'keyof IntrinsicElements | ComponentType<{}>' does not satisfy the constraint 'keyof IntrinsicElements'.
  Type 'ComponentClass<{}, any>' is not assignable to type 'keyof IntrinsicElements'.
    Type 'ComponentClass<{}, any>' is not assignable to type '"view"'

captain-yossarian from Ukraine · Accepted Answer · 2021-09-09 17:17:01Z

4

You were close.

ElementProps expects a string - keyof JSX.IntrinsicElements whether typeof tagName might be a ComponentType<{}.

Al you need to do is to move type restriction inside a type util.

import React, { useRef, createElement } from "react";

type ElementProps<Tag> =
  Tag extends keyof JSX.IntrinsicElements
  ? JSX.IntrinsicElements[Tag]
  : never

type Props = {
  tagName?: React.ComponentType | keyof JSX.IntrinsicElements;
};

const Editable: React.FC<Props> = ({
  tagName = 'div',
  ...props
}) => {
  const htmlEl = useRef(null);

  const elementProps: ElementProps<typeof tagName> = {
    ...props,
    ref: htmlEl,
  };

  return createElement(tagName, elementProps);
};

Playground

I was wondering if I could get the only detailed props regarding the tag that passed in the tagname?

Sure, it is possible.

import React, { useRef, createElement } from "react";

type ElementProps<Tag> = Tag extends keyof JSX.IntrinsicElements
  ? JSX.IntrinsicElements[Tag]
  : never;

type Values<T> = T[keyof T];

type ObtainHTMLProps<T extends Values<JSX.IntrinsicElements>> =
  T extends React.DetailedHTMLProps<infer Props, HTMLElement> ? Props : never;

type AllowedProps = Values<{
  [Tag in keyof JSX.IntrinsicElements]: {
    tagName: Tag;
  } & ObtainHTMLProps<JSX.IntrinsicElements[Tag]>;
}>;  

const Editable: React.FC<AllowedProps> = ({ tagName = "div", ...props }) => {
  const htmlEl = useRef(null);

  const elementProps: ElementProps<typeof tagName> = {
    ...props,
    ref: htmlEl,
  };

  return createElement(tagName, elementProps);
};

const canvas = <Editable tagName="canvas" width={20} /> // ok
const anchor = <Editable tagName="a" href={'www.example.com'} /> // ok

const invalid = <Editable tagName="canvas" href={'www.example.com'} /> // expected error

See react types node_modules\@types\react\index.d.ts. You will find there IntrinsicElements

Having tagName you can easily infer first argument of DetailedHTMLProps. See ObtainHTMLProps.

Now, you need to create a union of all allowed attributes and it is a finite number of props. See AllowedProps.

edited Sep 9, 2021 at 17:17

answered Sep 9, 2021 at 15:34

captain-yossarian from Ukraine

33.5k5 gold badges41 silver badges78 bronze badges

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

2 Comments

Tayab Over a year ago

It works Thanks, I was wondering if I could get the only detailed props regarding the tag that passed in the tagname?

Tayab Over a year ago

Thanks appreciate it. 👍

Collectives™ on Stack Overflow

Creating React Element Dynamically in Typescript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related