Open amcdnl opened 4 years ago
Seems like it was removed in this commit from what I can tell at a quick glance https://github.com/tasti/react-linkify/commit/95f86074dcddf55f903c6ee1b2ff71ea56c5f083#diff-3a7bfc073d2f2d2454177d75e2f4e231
As a workaround, you can do:
<Linkify
componentDecorator={(decoratedHref, decoratedText, key) => (
<a target="blank" href={decoratedHref} key={key}>
{decoratedText}
</a>
)}
>
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
Guess this library's dead right? Wanted to use it in production due it's size, bummer.
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.
Exactly @asp2809, that's actually how I figured out the workaround 👍
@nwesthoff
I used this. But still opening in the same tab itself.
`<Linkify
componentDecorator={(decoratedHref, decoratedText, key) => (
{decoratedText}
)}
`
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.
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.
@nwesthoff I didn't change anything but now it's working.
`<Linkify componentDecorator={(decoratedHref, decoratedText, key) => ( {decoratedText} )}
`
Thanks @nwesthoff
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>
nice. thank you @nwesthoff, as the docs still show the properties
prop: http://tasti.github.io/react-linkify/
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
Вы можете создать декоратор, как упоминалось в некоторых других комментариях. Если вы хотите безопасно открывать новые вкладки, особенно если ссылки уходят с контролируемого вами сайта, я предлагаю реализовать следующее:
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
<Linkify options={{target:'blank'}}> {data} </Linkify>
this is helpful and working fine
In the current version i.e. "^1.0.0-alpha", the support for properties is removed. You can either do like this:
<Linkify
componentDecorator={(decoratedHref, decoratedText, key) => (
<a target="blank" href={decoratedHref} key={key}>
{decoratedText}
</a>
)}
>
Else, downgrade to version "0.2.2". Worked for me!
I assume this should be closed. This worked fine for me on version 4.1.3: https://github.com/tasti/react-linkify/issues/96#issuecomment-1584437158
When I do:
and
description
equals:it will render:
with version: