react-linkify icon indicating copy to clipboard operation
react-linkify copied to clipboard

Does not work with dangerouslySetInnerHTML

Open leedongwei opened this issue 5 years ago • 4 comments

Hello! I ran into this bug while using the library. Linkify does not work when wrapping a component that's created with dangerouslySetInnerHTML. The use-case for that is to generate templates (e.g. blog posts) that was saved in a database.

// This identifies the URI and wraps it with an anchor text
<Linkify>
  <p>
    <span>Go to https://google.com</span>
  </p>
</Linkify>

// This did not catch the link
<Linkify>
  <p dangerouslySetInnerHTML={{ __html: '<span>Go to https://google.com</span>'}} />
</Linkify>

leedongwei avatar Jul 30 '18 08:07 leedongwei

It's a pretty easy fix, the parse function just has to check dangerouslySetInnerHTML.__html as well as children, but this repo seems fairly dead.

miklschmidt avatar Sep 03 '18 11:09 miklschmidt

Any updates on this issue?

bezunakarmi avatar May 14 '19 07:05 bezunakarmi

Any update on this issue?

kollynlund avatar Jun 03 '21 17:06 kollynlund

The is the work around and it worked just fine for me.

dangerouslySetInnerHTML={{ __html: ReactDOMServer.renderToString(<Linkify><span>Go to https://google.com</span></Linkify>) }}

codigoderey avatar May 26 '22 18:05 codigoderey