react-linkify

react-linkify

React component to parse links (urls, emails, etc.) in text into clickable links

Installation

npm install react-linkify --save

Usage

var Linkify = require('react-linkify');

React.render(
  <Linkify>Examples are available at tasti.github.io/react-linkify/.</Linkify>,
  document.body
);

Properties

component
The type of component to wrap links in.
type: any
default: 'a'

properties
The props that will be added to every matched component.
type: object
default: {href: Linkify.MATCH}

NOTE: Use Linkify.MATCH as a value to specify the matched link.

urlRegex
The regular expression used to identify url links.
type: object
default: /\b(?:(?:https):\/\/|[-A-Z0-9+&@#/%=~_|$?!:,.]+\.)(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[A-Z0-9+&@#/%=~_|$])/i

NOTE: I recommend that you use the default regex. If you want to modify it for some use case, it's probably better to file an issue and change the default since someone else might have the same issue.

Some of the cases the default regex handles (bold is the link):

• github​.com
• www​.google.com
• http://www​.zakarie.com
• https://www​.facebook.com
• "www​.google.com:8080"
• http://en​.wikipedia.org/wiki/React_(JavaScript_library)
• Examples are available at tasti​.github.io/react-linkify/.

Examples

Examples are available at tasti.github.io/react-linkify/.