[react-markdown] Correct way to type custom component renderers #744

SalahAdDin · 2021-06-12T22:58:05Z

SalahAdDin
Jun 12, 2021

We are trying to migrate our portfolio from JavaScript and TypeScript, we are using this package to render markdown.

But we are getting a big problem with typing:

<html>TS2322: Type 'FC&lt;IImageBlock&gt;' is not assignable to type 'keyof IntrinsicElements | NormalComponent | undefined'.<br/>Type 'FunctionComponent&lt;IImageBlock&gt;' is not assignable to type 'NormalComponent'.<br/>Types of parameters 'props' and 'props' are incompatible.<br/>Type 'ReactBaseProps &amp; ReactMarkdownProps' is not assignable to type 'PropsWithChildren&lt;IImageBlock&gt;'.<br/>Type 'ReactBaseProps &amp; ReactMarkdownProps' is missing the following properties from type 'IImageBlock': src, alt, title

<html>TS2322: Type 'FC&lt;{ url: string; }&gt;' is not assignable to type 'keyof IntrinsicElements | NormalComponent | undefined'.<br/>Type 'FunctionComponent&lt;{ url: string; }&gt;' is not assignable to type 'NormalComponent'.<br/>Types of parameters 'props' and 'props' are incompatible.<br/>Type 'ReactBaseProps &amp; ReactMarkdownProps' is not assignable to type 'PropsWithChildren&lt;{ url: string; }&gt;'.<br/>Property 'url' is missing in type 'ReactBaseProps &amp; ReactMarkdownProps' but required in type '{ url: string; }'.

Those for:

interface IImageBlock {
  src: string;
  alt: string;
  title: string | null;
}

const ImageBlock: React.FC<IImageBlock> = ({ alt, src, title }) => {
  const classes = useStyles();
  const globalClasses = useGlobalStyles();
  return (
    <Box className={clsx(classes.image, globalClasses.centeredImage)}>
      <Image
        alt={alt}
        src={src}
        quality={80}
        layout="fill"
        objectFit="contain"
        title={title}
      />
    </Box>
  );
};

const VideoBlock: React.FC<{ url: string }> = ({ url }) => {
  const classes = useStyles();
  return (
    <div className={classes.playerWrapper}>
      <ReactPlayer
        className={classes.reactPlayer}
        url={url}
        controls
        playing
        width="100%"
        height="100%"
      />
    </div>
  );
};

const _mapProps = (props: ReactMarkdownOptions): ReactMarkdownOptions => ({
  ...props,
  remarkPlugins: [
    // RemarkMathPlugin,
    // RemarkHighlightPlugin,
    unwrapImages,
    VideoPlugin,
  ],
  rehypePlugins: [
    rehypeRaw,
    [rehypeSanitize, merge(gh, { attributes: { code: ["className"] } })],
  ],
  components: {
    ...props.components,
    // math: ({ value }) => <BlockMath>{value}</BlockMath>,
    // inlineMath: ({ value }) => <InlineMath>{value}</InlineMath>,
    code: CodeBlock,
    img: ImageBlock,
    video: VideoBlock,
  },
});

const Content: React.FC<ReactMarkdownOptions> = (props) => (
  <ReactMarkdown {..._mapProps(props)} />
);

export default Content;

No problem with the CodeBlock, we think it is because its CodeComponent case.

What's the correct way to handle this?

Thanks.

Answered by ChristianMurphy

Jun 12, 2021

#714 (comment)

View full answer

ChristianMurphy · 2021-06-12T22:59:36Z

ChristianMurphy
Jun 12, 2021
Maintainer

#714 (comment)

6 replies

ChristianMurphy Jun 12, 2021
Maintainer

Got it, yes alt needs to be added, there was a PR recently that started to add alt and src, that got stalled, which could be used as a starting point remarkjs/react-markdown#591

SalahAdDin Jun 12, 2021
Author

It is also required for VideoComponent, do you suggest to create a new pull request or something?

ChristianMurphy Jun 12, 2021
Maintainer

Sure, a new pull request could work 👍

SalahAdDin Jun 12, 2021
Author

@ChristianMurphy remarkjs/react-markdown#603
It does fix the two bugs; but, honestly I don't understand how it does work, or it is transpiled or something like that.

ChristianMurphy Jun 13, 2021
Maintainer

Right, TypeScript offers two modes.
One is TypeScript the language, which needs to be compiled to JS and type definitions.
The other is JSDoc mode https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html which is already JS so it doesn't need to be compiled, instead it only needs to generate a type definition file (see: https://github.com/remarkjs/react-markdown/blob/8ed18dafa8de638ab72a8db29f156f9fd9cf9e2e/tsconfig.json#L9-L12 and https://github.com/remarkjs/react-markdown/blob/8ed18dafa8de638ab72a8db29f156f9fd9cf9e2e/package.json#L141)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

remark

[react-markdown] Correct way to type custom component renderers #744

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 6 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

remark

[react-markdown] Correct way to type custom component renderers #744

SalahAdDin Jun 12, 2021

Replies: 1 comment · 6 replies

ChristianMurphy Jun 12, 2021 Maintainer

ChristianMurphy Jun 12, 2021 Maintainer

SalahAdDin Jun 12, 2021 Author

ChristianMurphy Jun 12, 2021 Maintainer

SalahAdDin Jun 12, 2021 Author

ChristianMurphy Jun 13, 2021 Maintainer

SalahAdDin
Jun 12, 2021

Replies: 1 comment 6 replies

ChristianMurphy
Jun 12, 2021
Maintainer

ChristianMurphy Jun 12, 2021
Maintainer

SalahAdDin Jun 12, 2021
Author

ChristianMurphy Jun 12, 2021
Maintainer

SalahAdDin Jun 12, 2021
Author

ChristianMurphy Jun 13, 2021
Maintainer