react-linkify: Target Blank Doesn't Work

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",

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 19
Comments: 16

Most upvoted comments

As a workaround, you can do:

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

+103

nwesthoff on May 14, 2020

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>

+10

dbudwin on Dec 30, 2020

<Linkify options={{target:'blank'}}> {data} </Linkify> this is helpful and working fine

pvbgsharma-wal on Nov 7, 2022

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

ahAskari on May 12, 2022

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

edi on Jul 24, 2020