tasti / react-linkify Goto Github PK

Hi folks,

is it possible to use react-linkify with dangerouslySetInnerHTML?

<p dangerouslySetInnerHTML={{__html: description}} /><p/>

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>

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>

Is there some way I can tell react-linkify to create links that open in new tabs?

<Linkify target="_blank" />

or

<Linkify newTab={true} />

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.

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.

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.

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

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.

Saw some fixes that were made on 2.x, currently react-linkify depends on 1.2.0.

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?

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

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.

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> {
    }
}

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 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.

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.

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.

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.

Issue

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

Further reading

https://en.wikipedia.org/wiki/IDN_homograph_attack

Potential remediation

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

Not working with this type of elements:

<Linkify> 
  <ListItemText primary={message}  className={class}/>
</Linkify>

Is there any known workaround or alternative?

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?

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.

<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.

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>

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

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/?

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:

https://www.google.com/search?source=hp&ei=y0QtW7yUGpiq0PEPv5qv8Ag&q=best+sci+fi+books&oq=best+sci&gs_l=psy-ab.3.1.0j0i20i264k1j0j0i131k1j0l6.2035.4079.0.5985.9.8.0.0.0.0.132.797.5j3.8.0....0...1c.1.64.psy-ab..1.8.797.0..35i39k1j0i67k1.0.iug3EHWIyxc

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>

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

I have text:
This is some twitter text by @raja @rao bla bla

I need to convert @raja and @rao as @raja and @rao

Thanks!

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

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?

Gertting this error in console with Linkify:

Warning: Failed propType: Calling PropTypes validators directly is not supported by the prop-types package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types Check the render method of Readmore.

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.

Is there anyway to open the link in a new tab? right now it opens it in the same tab

In 0.2.2 import { linkify } from "react-linkify" resulted in linkify referencing global LinkifyIt instance. In 1.0.0-alpha linkify is undefined

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.

n/t @tasti

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.

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:

• 

• Is this an expected behaviour ?

https://codesandbox.io/s/naughty-sutherland-6nhkv?file=/src/App.js

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

Three distinct messages.

First link render fine, because it's all on it's own.

Second link doesn't work because of the colon before the link most likely.

Any ideas? I'm on latest 0.2.2

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!

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!

Overview

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

Requirements

There are several components to get this done.

Custom Handlers

Related: #10, #20

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.

Href Decorator

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:

• Wrap a url with a tracking url
• Add query parameters to a url

Text Decorator

Related: #22

File: src/decorators/textDecorator.js

Similar to the above, except modifying the actual text that is displayed.

Examples:

• Hide the protocol in a url
• Display external link icons (https://en.wikipedia.org/wiki/Help:External_link_icons)

Miscellaneous

• Compatibility with react-native
• Persist compatibility with server-side rendering

I'd love to hear some feedback and get some extra hands on this roadmap!

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.

Invalid tlds are recognized as links, for instance "node.js".

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.

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?

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.

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)