Comments (13)
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>
from react-linkify.
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>
from react-linkify.
really could use the ability to set target to _blank 😬
from react-linkify.
@steverecio Really helpful. Many thanks
from react-linkify.
This bug was introduced in 1.0.0-alpha. Release 0.2.2 does not have this issue.
from react-linkify.
anybody find a solution?
from react-linkify.
@steverecio Good solution!
from react-linkify.
@steverecio Thank you!
from react-linkify.
from react-linkify.
Seems properties doesn't work at all. Maybe it's missing to pass them to the default componentDecorator.
from 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>
from react-linkify.
@dbudwin is the gist here to add rel="noopener noreferrer"
to the <a />
tags?
from react-linkify.
@steverecio yes, that's effectively what it does. Just abstracts away the "how" of creating a secure link in a new tab. Nothing fancy.
from react-linkify.
Related Issues (20)
- Linkify not working on contentEditable component HOT 1
- Support for clickable phone number
- package not working on mobile ( iphone & android ) HOT 1
- When I use dangerouslySetInnerHTML it doesn't linkify HOT 3
- Any chance for multiline support? HOT 1
- ESM import issue causing: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. HOT 1
- String text passed in as a value in <textarea> does not seem to be supported with react-linkify HOT 1
- Can't identity the links with whitespaces HOT 1
- Error when using "react-linkify" in a Next.js app
- Quoted email addresses do not link properly
- Email addresses will not parse correctly HOT 1
- Latest Dist is not latest build HOT 2
- Readme and example site is outdated HOT 2
- Homograph attack (Security) HOT 2
- Invariant Violation HOT 2
- import { linkify } from "react-linkify" gives undefined HOT 6
- Props don't work HOT 1
- Target Blank Doesn't Work HOT 16
- React Linkify - Properties is not working HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-linkify.