Skip to content

Instantly share code, notes, and snippets.

@natterstefan

natterstefan/HTMLToReact.tsx

Last active April 8, 2024 13:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save natterstefan/3bc712eca6ff88781d687b7240a78cc1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save natterstefan/3bc712eca6ff88781d687b7240a78cc1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. natterstefan revised this gist Sep 26, 2021. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,4 +2,4 @@

    ![visitors](https://page-views.glitch.me/badge?page_id=3bc712eca6ff88781d687b7240a78cc1)

    Related to [this issue](https://github.com/remarkablemark/html-react-parser/issues/221#issuecomment-825601871).
    This is the related [issue](https://github.com/remarkablemark/html-react-parser/issues/221#issuecomment-825601871) and [the solution](https://github.com/remarkablemark/html-react-parser/pull/296) that is by the time you read this probably merged already.
  2. natterstefan revised this gist May 27, 2021. 1 changed file with 1 addition and 5 deletions.
    6 changes: 1 addition & 5 deletions HTMLToReact.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -5,13 +5,9 @@ import React from 'react'
    import parse, {
    domToReact,
    attributesToProps,
    Element,
    HTMLReactParserOptions,
    } from 'html-react-parser'
    /**
    * only installed because of this issue, although it comes with html-react-parser already.
    * @see https://github.com/remarkablemark/html-react-parser/pull/201#issuecomment-825549767
    */
    import { Element } from 'domhandler/lib/node'

    /**
    * I got some TS issues, that's why I came up with `typedDomNode`.
  3. natterstefan revised this gist Apr 29, 2021. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,4 +2,4 @@

    ![visitors](https://page-views.glitch.me/badge?page_id=3bc712eca6ff88781d687b7240a78cc1)

    Related to [this issue](https://github.com/remarkablemark/html-react-parser/issues/221#issuecomment-825601871)
    Related to [this issue](https://github.com/remarkablemark/html-react-parser/issues/221#issuecomment-825601871).
  4. natterstefan revised this gist Apr 29, 2021. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    # html-react-parser | TypeScript Error - instanceof Element always return false with Next.js

    ![visitors](https://page-views.glitch.me/badge?page_id=3bc712eca6ff88781d687b7240a78cc1)

    Related to [this issue](https://github.com/remarkablemark/html-react-parser/issues/221#issuecomment-825601871)
  5. natterstefan created this gist Apr 23, 2021.
    44 changes: 44 additions & 0 deletions HTMLToReact.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    /**
    * Works in Next.js 10.x
    */
    import React from 'react'
    import parse, {
    domToReact,
    attributesToProps,
    HTMLReactParserOptions,
    } from 'html-react-parser'
    /**
    * only installed because of this issue, although it comes with html-react-parser already.
    * @see https://github.com/remarkablemark/html-react-parser/pull/201#issuecomment-825549767
    */
    import { Element } from 'domhandler/lib/node'

    /**
    * 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)}</>
    }