Target Blank Doesn't Work

[amcdnl]

When I do:

<Linkify properties={{ target: '_blank' }}>
   {description}
 </Linkify>

and description equals:

The JSON Query expression. Reference: http://docs.jsonata.org

it will render:

The JSON Query expression. Reference: <a href="http://docs.jsonata.org">http://docs.jsonata.org</a>

with version:

"react-linkify": "^1.0.0-alpha",

[brianedelman]

Seems like it was removed in this commit from what I can tell at a quick glance 95f8607#diff-3a7bfc073d2f2d2454177d75e2f4e231

[nwesthoff]

As a workaround, you can do:

<Linkify
    componentDecorator={(decoratedHref, decoratedText, key) => (
        <a target="blank" href={decoratedHref} key={key}>
            {decoratedText}
        </a>
    )}
>

[Davinasc]

As a workaround, you can do:

<Linkify
    componentDecorator={(decoratedHref, decoratedText, key) => (
        <a target="blank" href={decoratedHref} key={key}>
            {decoratedText}
        </a>
    )}
>

wow! works like a charm. Thank you @nwesthoff

[edi]

Guess this library's dead right? Wanted to use it in production due it's size, bummer.

[asp2809]

Seems like it was removed in this commit from what I can tell at a quick glance 95f8607#diff-3a7bfc073d2f2d2454177d75e2f4e231

Seems like they have removed the support for the properties prop entirely and the only way around is using decorators as @nwesthoff suggested.

[nwesthoff]

Exactly @asp2809, that's actually how I figured out the workaround 👍

[theutkarshsoni]

@nwesthoff

I used this. But still opening in the same tab itself.
<Linkify componentDecorator={(decoratedHref, decoratedText, key) => ( <a target="blank" href={decoratedHref} key={key}> {decoratedText} </a> )} >

I checked through the inspect element. The output is following:
<a href="https://forms.gle/B8AfrGR4SE6WXd8o6">https://forms.gle/B8AfrGR4SE6WXd8o6</a>

Please help me out. I'm stuck here.

[nwesthoff]

Not sure if this is what you're running into but the Linkify component should either have a closing </Linkify> or add a / before the final > as such:

<Linkify componentDecorator={(decoratedHref, decoratedText, key) => (
    <a target="blank" href={decoratedHref} key={key}>
        {decoratedText}
    </a>)}
/>

If that doesn't help, please create a minimal reproduction on codesandbox and I might be able to help.

[theutkarshsoni]

@nwesthoff I didn't change anything but now it's working.

<Linkify componentDecorator={(decoratedHref, decoratedText, key) => ( <a target="blank" href={decoratedHref} key={key}> {decoratedText} </a> )} >

Thanks @nwesthoff

[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>

[ryanbuckleyca]

nice. thank you @nwesthoff, as the docs still show the properties prop: http://tasti.github.io/react-linkify/

[ahAskari]

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>

Thanks, this worked for me

[Ponao]

Вы можете создать декоратор, как упоминалось в некоторых других комментариях. Если вы хотите безопасно открывать новые вкладки, особенно если ссылки уходят с контролируемого вами сайта, я предлагаю реализовать следующее:

CodeSandbox с поддержкой TypeScript: https://codesandbox.io/s/cool-montalcini-vkmtb?file=/src/App.tsx

npm install react-secure-link

...тогда...

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>

I think we dont need install package for this goal, we can just add rel="noopener noreferrer". Just a thought