The properties don't work when in Semantic UI <Comments>

[ElixirMike]

I'm using Semantic UI to output a users comment and want to convert any links they enter innto hyperlniks. The link gets converted, but it ignores all the properties so the link doesn't open in a new tab, change, color, etc. Here is simple snippet.

        <Linkify properties={{target: '_blank', style: {color: 'red', fontWeight: 'bold'}}}>
        {message.content ? <Comment.Text>{message.content}</Comment.Text> : null }
        </Linkify>

I've also tried moving the tag inside the <Comment.Text> and it made no difference. Any possible solution?

[dlombardi]

really could use the ability to set target to _blank 😬

[steverecio]

anybody find a solution?

[steverecio]

Solution:

const componentDecorator = (href, text, key) => (
   <a href={href} key={key} target="_blank">
     {text}
   </a>
);

<Linkify componentDecorator={componentDecorator}>
   some user input http://github.com
</Linkify>

[LaurentiuCotaga]

@steverecio Good solution!

[amandasavluchinske]

@steverecio Thank you!

[sydinh]

@steverecio Really helpful. Many thanks

[mhemrg]

#78 (comment)

[evoyy]

This bug was introduced in 1.0.0-alpha. Release 0.2.2 does not have this issue.

[nodabladam]

Thanks @steverecio, this solution saved the day! This is what I ended up with to get noopener and punycode going:

import punycode from "punycode";
...
const componentDecorator = (href, text, key) => (
   <a href={href} key={key} target="_blank" rel="noopener">
      {punycode.toASCII(text)}
  </a>
);
...
<Linkify componentDecorator={componentDecorator}>
   ...
</Linkify>

[seromenho]

Seems properties doesn't work at all. Maybe it's missing to pass them to the default componentDecorator.

[dbudwin]

You can create a decorator like some of the other comments here have mentioned. If you want to open new tabs securely, especially if the links are leaving the site you control, I suggest implementing the following:

TypeScript supported CodeSandbox: https://codesandbox.io/s/cool-montalcini-vkmtb?file=/src/App.tsx

npm install react-secure-link

...then...

import { SecureLink } from "react-secure-link"

<Linkify componentDecorator={(decoratedHref, decoratedText, key) => (
    <SecureLink href={decoratedHref} key={key}>{decoratedText}</SecureLink>
)}>
    Here is a link that will open securely in a new tab: www.github.com.
</Linkify>

[steverecio]

@dbudwin is the gist here to add rel="noopener noreferrer" to the <a /> tags?

[dbudwin]

@steverecio yes, that's effectively what it does. Just abstracts away the "how" of creating a secure link in a new tab. Nothing fancy.