html-react-parser | TypeScript solution

README.md

html-react-parser | TypeScript Error - instanceof Element always return false with Next.js

This is the related issue and the solution that is by the time you read this probably merged already.

HTMLToReact.tsx

/**
* Works in Next.js 10.x
*/
import React from 'react'
import parse, {
  domToReact,
  attributesToProps,
  Element,
  HTMLReactParserOptions,
} from 'html-react-parser'

/**
 * I got some TS issues, that's why I came up with `typedDomNode`.
 *
 * Related issues:
 * @see https://github.com/remarkablemark/html-react-parser/issues/221#issuecomment-771600574
 */
const options: HTMLReactParserOptions = {
  replace: domNode => {
    const typedDomNode = domNode as Element

    if (typedDomNode.attribs && typedDomNode.name === 'a') {
      return (
        <a
          {...attributesToProps(typedDomNode.attribs)}
          className="underline text-primary-500"
          target="_blank"
        >
          {typedDomNode.children && domToReact(typedDomNode.children, options)}
        </a>
      )
    }

    return false
  },
}

export const HTMLToReact = ({ html }: { html: string }) => {
  return <>{parse(html, options)}</>
}