tasti / react-linkify Goto Github PK
View Code? Open in Web Editor NEWReact component to parse links (urls, emails, etc.) in text into clickable links
Home Page: http://tasti.github.io/react-linkify/
License: MIT License
React component to parse links (urls, emails, etc.) in text into clickable links
Home Page: http://tasti.github.io/react-linkify/
License: MIT License
react-linkify
is great but.
We do not use babel nor ES2015 so far and it seems that after update to 0.1.2
react-linkify
broke our app because it uses ES2015 exports so if you require it in eg. coffee-script
.
you get:
Linkify = require('react-linkify') // {default: Linkfy, ...}
See the problem?
Please add support for common js
into your build process, don't rely just on ES2015 exports, thanks!
I want to wrap something like this:
D:\Dropbox\Gabriel Software\projekte\awel-kapla\2016 03 04 Offerte\Offerte.pdf
I tried this:
<Linkify
properties={{
target: '_blank',
}}
>
{link.url}
</Linkify>
but it does not build a link.
I initially kept the dist/
folder to allow installing this package directly from GitHub. I think getting rid of generated code here will help keep the repo clean and prevent others from forgetting to regenerate it.
Based on the recent feature request, I've been brainstorming how we could incorporate them into this package and solidify the API.
Since there are similarities between these features, it would be best if we synchronize these ideas and lay them out here. Below is what I imagine the package to look like. Anyone's input is more than welcome!
Let's begin with the end in mind. Here's what the directory structure would potentially look like:
src/
components/
__tests__
Linkify.jsx
LinkifyIt.jsx
decorators/
hrefDecorator.js
textDecorator.js
index.js
.babelrc
.gitignore
LICENSE
README.md
package.json
There are several components to get this done.
File: src/components/LinkifyIt.jsx
To allow flexibility of and prevent convoluting the base Linkify
component, we will introduce a LinkifyIt
component. This would allow us to take advantage of existing logic from linkify-it without tightly coupling this package to it.
Related: #21
File: src/decorators/hrefDecorator.js
To support modifying a matched href. This would be more so a collection of utility implementations that would commonly be used for the examples below.
Examples:
Related: #22
File: src/decorators/textDecorator.js
Similar to the above, except modifying the actual text that is displayed.
Examples:
I'd love to hear some feedback and get some extra hands on this roadmap!
Some text that is wrapped in linkify with $10.00 in it
Will display:
10.00in itSome text that is wrapped in linkify with $
But when copied/pasted, it is the correct value.
When I Try to use Linkify wrapping a contentEditable component it does not render an a
tag;
code example:
<Linkify>
<h1 contentEditable> Type a link </h1>
</Linkify>
the HTML produced:
*
the HTML I expected:
https://codesandbox.io/s/naughty-sutherland-6nhkv?file=/src/App.js
Uncaught ReferenceError: require is not defined
at eval (Linkify.js:10)
at Object. (application.js?e57a035…:10974)
at webpack_require (vendor.js?e57a035…:74)
at eval (Description.js:4)
at Object. (application.js?e57a035…:8226)
at webpack_require (vendor.js?e57a035…:74)
at eval (Header.js:33)
at Object. (application.js?e57a035…:8232)
at webpack_require (vendor.js?e57a035…:74)
at eval (View.js:15)
it would be nice to have a react-linkify@next
version published on npm to test and use the new features implemented with 1.0.0-alpha
Documentation and last npm published version has a whole lot API breaking changes, and therefore both the readme and examples site is useless.
Tried to use this component, and did not understand why nothing works a according to the docs.
Checked the package in node_modules and there were a total different API.
Please update both the examples and the docs.
Hi, thanks for the module. Unfortunately it doesn't do what I was expecting, so I won't be using it right now. But one suggestion I have is to also parse actual HTML for links. For example:
I know I can just change the way the content of the variable is printed and use dangerouslySetInnerHtml or whatever it's named, but I don't really want to... dangerously set inner HTML. I only want it to run for links, which is why a quick google brought up this module.
Would it be possible to attempt to convert the <a href="http://www.google.com">Google</a>
instances first and then, if failing to find them, convert the actual link inside? Otherwise you get the weird bug seen above.
Thanks
Matt
I included Linkify according to the documentation:
import Linkify from 'react-linkify';
render() { return ( ... <Linkify>{some.text}</Linkify> ... ); }
but when running my app I get:
invariant.js:44 Uncaught (in promise) Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of 'Linkify'. at invariant (http://localhost:3020/static/js/bundle.js:11421:16) at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (http://localhost:3020/static/js/bundle.js:25798:24) at ReactCompositeComponentWrapper.performInitialMount (http://localhost:3020/static/js/bundle.js:26223:23) at ReactCompositeComponentWrapper.mountComponent (http://localhost:3020/static/js/bundle.js:26114:22) at Object.mountComponent (http://localhost:3020/static/js/bundle.js:18495:36) at ReactDOMComponent.mountChildren (http://localhost:3020/static/js/bundle.js:25232:45) at ReactDOMComponent._createInitialChildren (http://localhost:3020/static/js/bundle.js:22237:33) at ReactDOMComponent.mountComponent (http://localhost:3020/static/js/bundle.js:22056:13) at Object.mountComponent (http://localhost:3020/static/js/bundle.js:18495:36) at ReactCompositeComponentWrapper.performInitialMount (http://localhost:3020/static/js/bundle.js:26227:35)
I also tried importing like
import {Linkify} from 'react-linkify';
as it seemed that sometimes this causes the invariant violation. But it did not fix the problem. What could I be doing wrong here? Any help is appreciated.
I need to send matched URLs through decodeURI
before inserting them back into the text. This is not currently possible, right? Would be great to accept a transformation function to do this.
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",
I needed typings to use this library in my React app using Typescript, but couldn't find any. I didn't want to create a perfect file, but just needed something that works. This "index.d.ts" did it for me. In case anyone wants to re-use this or improve it, so it may be included as part of this library : feel free.
declare module 'react-linkify' {
export default class Linkify extends React.Component<any, any> {
}
}
This lib, even the Github viewer itself, is vulnerable to a homograph attack - meaning that we can leverage a seemingly innocent link e.g. http://ebаy.com
to redirect users to actually http://xn--eby-7cd.com
Imagine if a user posts a link like this into a forum and has other susceptible users click on it.
Homograph normalized: http://ebаy.com (hover over the URL to see the browser decode the URL)
Actual equivalent IDN (punycode): http://xn--eby-7cd.com
https://en.wikipedia.org/wiki/IDN_homograph_attack
https://en.wikipedia.org/wiki/IDN_homograph_attack#Defending_against_the_attack
We can leverage punycode (https://en.wikipedia.org/wiki/Punycode) to display the URL instead of the normalized URL. This could be a configurable option for the lib so the user of the lib can choose their risk profile. But I would recommend setting the use of punycode to true by default so we can avoid the security issue as described.
https://www.npmjs.com/package/punycode is a popular lib for JS.
Originally reported by @Mik317 to our security program
Hey, I really like this component, it is simple and instantly worked.
One thing that bugs me is that you are doing the detection of links on your own inside the component.
Wouldn't it be better to use some bulletproof library to do this job? So the only thing the component needs to care then is creating the elements.
There is for example this library https://github.com/markdown-it/linkify-it which is heavily used (nearly 200k downloads on npm).
If you are interested I could create a pull request for this. What do you think?
n/t @tasti
URLs can be long and not very human readable. It would be nice to have an option where-by the link text can be customized, either by extracting context from the URL or making a background request to fetch metadata.
https://www.google.ru/maps/@59.9393895,30.3165389,15z
--> <a href="https://www.google.ru/maps/@59.9393895,30.3165389,15z">Map (59.9393895N 30.3165389E)</a>
https://www.google.com/maps/place/New+York,+NY
--> <a href="https://www.google.com/maps/place/New+York,+NY">New York, NY</a>
Usage could be something like:
<Linkify tranform={fn}>{text}</Linkify>
Starting from React 16 there is no need for a component to wrap all its content into a single HTML tag, so react-linkify
could just keep the original elements by just replacing links with <a>
tags.
I'm using Semantic UI to output a users comment and want to convert any links they enter innto hyperlniks. The link gets converted, but it ignores all the properties so the link doesn't open in a new tab, change, color, etc. Here is simple snippet.
<Linkify properties={{target: '_blank', style: {color: 'red', fontWeight: 'bold'}}}>
{message.content ? <Comment.Text>{message.content}</Comment.Text> : null }
</Linkify>
I've also tried moving the tag inside the <Comment.Text> and it made no difference. Any possible solution?
Is there some way I can tell react-linkify to create links that open in new tabs?
<Linkify target="_blank" />
or
<Linkify newTab={true} />
Invalid tlds are recognized as links, for instance "node.js".
Is there anyway to open the link in a new tab? right now it opens it in the same tab
If we had an email in a text with an:[email protected], the email address will not parsed correctly. Your program will hit the whole string instead of the email address.
<Linkify properties={{style: {textDecoration: 'none', color: 'black'}, target: '_blank'}}>{text}</Linkify>
This is my code and the properties prop doesn't work. It seems to neither open the link in a new tab or style the link.
In render of Linkify.jsx, you can replace return code with this line to add supports to HTML tags.
<span className={this.props.className} dangerouslySetInnerHTML={{ __html: parsedChildren }}></span>
Im attempting to use react-linkify with react-highlight-words (https://github.com/bvaughn/react-highlight-words/blob/master/src/Highlighter.js)
However it appears linkify is not finding the text.
<Linkify properties={ { target: '_blank' } }><Highlighter searchWords={ this.props.highlight } textToHighlight={ msg.body }>{ msg.body }</Highlighter></Linkify>
Its not an issue with the resulting DOM, as mimicking the DOM as input still works.
<Linkify properties={ { target: '_blank' } }><span><span>{ msg.body }</span></span></Linkify>
It appears to be caused by the fact that react-highlight doesn't place the text as a child, but a prop instead.
In 0.2.2 import { linkify } from "react-linkify"
resulted in linkify
referencing global LinkifyIt instance. In 1.0.0-alpha linkify
is undefined
The following link will cause Linkify to fail to wrap the a tag around the entire link, it breaks at the point of the first instance of three dots:
Hello! I ran into this bug while using the library. Linkify
does not work when wrapping a component that's created with dangerouslySetInnerHTML
. The use-case for that is to generate templates (e.g. blog posts) that was saved in a database.
// This identifies the URI and wraps it with an anchor text
<Linkify>
<p>
<span>Go to https://google.com</span>
</p>
</Linkify>
// This did not catch the link
<Linkify>
<p dangerouslySetInnerHTML={{ __html: '<span>Go to https://google.com</span>'}} />
</Linkify>
I found handle asia
language not right, eg:
链接http://t.cn/RcPQ214
I check source and found use module linkify-it
to handle text
, I use linkify-it's demo and found not right parse
Linkify properties is not working and says error - method overload is not allowed. I have checked in both '^1.0.0-alpha' and '0.2.2' versions.
I know that you can customize the global linkify instance, and that's great, but I'd like to be able to apply some customizations in some cases and different ones in others.
As an example, I'd like to convert @mentions and #hashtags for Twitter where I'm dealing with tweet text, but then also be able to do the same for Instagram, in the same app.
At the moment I can't see how this would be possible. If you could pass configuration into each instance that would achieve this, that would be great.
I've noticed there's a backlog of PR's...is a new/additional maintainer needed? This is a wonderful library which we get a lot of value out of, and we'd be happy to lend a hand.
Hi,
Thanks for your work on this package.
In the documentation, it is described how the global Linkify instance is made available for further customization. I see that the feature was added in Linkify.jsx on the master branch but not in the transpiled version in dist/ which package.json points to and also not in the version on npm.
Would it be possible to build with the new changes and publish an updated version to npm to match the capabilities described in the readme? Or even to just push an updated version in dist/?
React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server.
The following string iTunes:bit.ly/oaKTSQ
does not get linkified whereas iTunes: bit.ly/oaKTSQ
does. It's a bit ambiguous of course, but do you suggest any option to support it?
Hi guys,
I love the library and recently included it in a project. But I noticed that the issue regarding use of for..of
is fixed yet still present in the npm version as your last release was Nov 2015. I'm using git instead of npm for now, but to help newcomers, could you please release a new version containing all recent fixes?
Thanks
-Liam
Gertting this error in console with Linkify:
Warning: Failed propType: Calling PropTypes validators directly is not supported by the
prop-types
package. UsePropTypes.checkPropTypes()
to call them. Read more at http://fb.me/use-check-prop-types Check the render method ofReadmore
.
My code:
<div className="col-12 col-9-tablet col-8-hd center-element no-padding"> <Linkify properties={{target: '_blank'}}> <p>{'Lorem ipsum dolor sit amet, postea scripta accusam in vel, duo at eros simul appareat, nam ei accusam adipisci reformidans. Duo fabulas moderatius contentiones in, cu vis duis oportere. Eum paulo assentior et. Semper integre ei quo, ius et semper vidisse tibique.Dicta perpetua gloriatur has et, te nostro electram efficiantur eum. Ius minim causae honestatis an, nam id vide duis probo, congue libris cu eos. No usu habeo forensibus, at nam evertitur torquatos. Moderatius accommodare ad nec. Essent apeirian eu vix, ne everti civibus salutatus vix. Ea eros ferri est, sit aliquando contentiones cu. http://google.com'}</p> </Linkify> </div>
However it works but the console error is annoying.
Saw some fixes that were made on 2.x, currently react-linkify depends on 1.2.0.
Not working with this type of elements:
<Linkify>
<ListItemText primary={message} className={class}/>
</Linkify>
Is there any known workaround or alternative?
Symbol is defined on chrome and firefox at the moment, but for other browsers there is a good chance this is not implemented which leaves it to the developer to know this and require his/her knowledge to polyfill/ponyfill ahead of time
Hi folks,
is it possible to use react-linkify with dangerouslySetInnerHTML?
<p dangerouslySetInnerHTML={{__html: description}} /><p/>
Hello,
thank for this great package.
But I have encountered an issue recently. Since version 0.1.2
, 0.1.1
works OK.
I get an error when linkify is renderer which completely breaks down React rendering and it is just stuck.
The error:
React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `NoteBoxCommentItem`.
No changes in my markup was made, only thing that changed is react-linkify
version.
I was reading this library uses linkify-it: (https://github.com/markdown-it/linkify-it), so I was wondering where should I add a new pattern to recognize for example phone numbers using react typescipt.
Is there any example to achieve this or similar behaviour?
Would be nice to be able to hide http(s):// from the rendered link. e.g.:
Original:
<Linkify hideScheme>Go to https://www.github.com</Linkify>
Would render to:
Go to <a href="https://www.github.com">www.github.com</a>
Try rendering a component with the following:
<Linkify>User changed email address to "[email protected]"</Linkify>
You'll notice that the opening quote is included in the mailto
link (as mailto:"[email protected]
). Even though quotes are allowed in the email address syntax, since there's not closing quote on the local part of the address I wouldn't expect linkify to try to include it in the email address.
I should have been able to use my own componentDecorator but the replacement "component" is not used in a way that is extensible. In the src it seems to be fine. Just needs another build from what I can tell.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.