Components support

[rentalhost]

Does this package allow you to convert custom components? My server returns data as <Post comment="" /> instead of JSON (and this is intentional). And I wanted the Post to be compiled by React and work as if it were part of the original code.

Intentionally, the server may return a JSX contents on its own, and my application only "offers" the compatible components to be rendered.

[remarkablemark]

This packages allows you to convert custom components to a limited degree. What I mean by that is this is an HTML string to React elements parser and not a JSX string to React elements parser.

So if you have the HTML string:

<Post comment="Hello, world!" />

Then you can parse it with this library:

import parse from 'html-react-parser';

parse('<Post comment="Hello, world!" />');

However, the output will lowercase the tag:

{
  '$$typeof': Symbol(react.element),
  type: 'post',
  key: null,
  ref: null,
  props: { comment: 'Hello, world!', children: null },
  _owner: null,
  _store: {}
}

To disable lowercase tags (this option is only available on the server-side):

parse('<Post comment="Hello, world!" />', {
  htmlparser2: {
    lowerCaseTags: false,
  },
});

Then the output will be:

{
  '$$typeof': Symbol(react.element),
  type: 'Post',
  key: null,
  ref: null,
  props: { comment: 'Hello, world!', children: null },
  _owner: null,
  _store: {}
}

But you'll notice that the type is a string and not a component.

To render it as a React component, you'll need to use replace:

function Post(props) {
  return <p>{props.comment}</p>;
}

parse('<Post comment="Hello, world!" />', {
  htmlparser2: {
    lowerCaseTags: false,
  },
  replace(domNode) {
    if (domNode.name === 'Post') {
      return <Post {...domNode.attribs} />;
    }
  },
});

Let me know if that answers your question. Also check out this Replit demo.

[rentalhost]

Interesting! I believe this will work well enough for me. Thanks!

[remarkablemark]

You're very welcome!