search

remarkjs / react-remark

React component and hook to use remark to render markdown
https://remarkjs.github.io/react-remark
MIT License
209 stars 7 forks source link

Custom components error #75

Closed imclint21 closed 7 months ago

imclint21 commented 7 months ago

Initial checklist

Affected packages and versions

latest

Link to runnable example

No response

Steps to reproduce

Use rehypeReactOptions

Expected behavior

I'm interested by create custom components like this:

components: {
    "interactive-counter": Counter
}

Actual behavior

Seems than custom components does not work, and give an empty

Runtime

No response

Package manager

No response

OS

No response

Build and bundle tools

No response

ChristianMurphy commented 7 months ago

react-remark, rehype-react, react-markdown, and mdx all support custom instrinsic elements through extensions of the React intrinsic. You can find more on that here: https://goulet.dev/posts/consuming-web-component-react-typescript/

imclint21 commented 7 months ago

I see, but there no simple way to create custom components using remark without creating intrinsic components?

ChristianMurphy commented 7 months ago

If you want strong TypeScript types, no. You need to type your custom elements.

Without TypeScript sure, as long as it's a valid HTML custom element it should work.

If you want custom elements in the JSX sense, then you would want/need https://mdxjs.com/