New tab prop

[jb-reefer]

Per the discussion on Issue #48, I have added a newTab boolean prop that, if provided, will set target: _blank on matched URLs.

I added unit tests for the positive and negative cases, but I would LOVE feedback - this style of React is a bit different from what I'm used to writing 😃

[tasti]

This does increase ease of use for enabling target: _blank, but implementing this as a one-off doesn't seem scalable for other use-cases.

Currently, you can get the same result by doing:

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

In v1.0.0, you'll be able to do:

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

<Linkify componentDecorator={componentDecorator}>
  ...
</Linkify>

This may look like more code, but the idea is to make Linkify more customizable. To simplify, you can place the above in your own LinkifyWithTargetBlank component and reuse as often as you'd like.

Does this seem reasonable?

[AppLoidx]

Using target="_blank" without rel="noopener noreferrer" is a security risk.

Example: https://mathiasbynens.github.io/rel-noopener

I think good way is to use with rel property

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

    <Linkify componentDecorator={componentDecorator}>
      ...
    </Linkify>

Anyway, thank you!

[nevermore11184]

@tasti I recently downloaded the latest version of react-linkify and looks like new tab property does not work for me. I even haven`t found it in props, which in turn means that package was downloaded without this update. Can u help me with this issue?

[tasti]

@nevermore11184 have you tried using the componentDecorator prop? Please see the examples above.

[karanraj97]

@tasti please update in documentation here http://tasti.github.io/react-linkify . For target new tab, no more property?.