react-linkify

What is react-linkify?

The react-linkify package is a React component that automatically turns plain text URLs in its children into clickable links. It is useful for rendering user-generated content where URLs need to be detected and converted into hyperlinks.

What are react-linkify's main functionalities?

Basic URL Linking

This feature allows you to automatically convert plain text URLs into clickable links. In this example, the URL 'https://www.google.com' will be converted into a clickable link.

```jsx
import React from 'react';
import Linkify from 'react-linkify';

const App = () => (
  <Linkify>
    Here is a link to Google: https://www.google.com
  </Linkify>
);

export default App;
```

Custom Link Component

This feature allows you to customize the appearance and behavior of the links by providing a custom link component. In this example, the custom link component changes the link color to red.

```jsx
import React from 'react';
import Linkify from 'react-linkify';

const CustomLink = ({ href, text }) => (
  <a href={href} style={{ color: 'red' }}>
    {text}
  </a>
);

const App = () => (
  <Linkify componentDecorator={(decoratedHref, decoratedText, key) => (
    <CustomLink href={decoratedHref} text={decoratedText} key={key} />
  )}>
    Here is a link to Google: https://www.google.com
  </Linkify>
);

export default App;
```

Other packages similar to react-linkify

react-autolink-text

The react-autolink-text package is similar to react-linkify in that it also converts plain text URLs into clickable links. However, it offers additional features such as the ability to linkify email addresses and Twitter handles. It provides more customization options for different types of links.

linkifyjs

The linkifyjs package is a more general-purpose library that can be used with or without React. It provides extensive customization options and supports a wide range of link types, including URLs, email addresses, and hashtags. It is more versatile but requires more setup compared to react-linkify.

react-linkify-it

The react-linkify-it package is another alternative that uses the linkify-it library under the hood. It offers similar functionality to react-linkify but with the added benefit of using the robust linkify-it library for link detection. It provides good performance and flexibility.

README

react-linkify

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

Examples

Live examples are available at http://tasti.github.io/react-linkify/.

Basic

Any link that appears inside the Linkify component will become clickable.

<Linkify>See examples at tasti.github.io/react-linkify/.</Linkify>

Renders to:

See examples at tasti.github.io/react-linkify/.

Advanced

If you're feeling lazy, you can wrap Linkify around anywhere that you want links to become clickable. Even with nested elements, it traverses the tree to find links.

<Linkify>
  <div>react-linkify <span>(tasti.github.io/react-linkify/)</span></div>
    <div>React component to parse links (urls, emails, etc.) in text into clickable links</div>
  See examples at tasti.github.io/react-linkify/.
    <footer>Contact: [e-mail]</footer>
</Linkify>

Renders to:

react-linkify (tasti.github.io/react-linkify/) React component to parse links (urls, emails, etc.) in text into clickable links See examples at tasti.github.io/react-linkify/. Contact: [e-mail]

Installation

yarn add react-linkify

or

npm install react-linkify --save

Usage

import Linkify from 'react-linkify';

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

Props

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

NOTE: Use Linkify.MATCH as a value to specify the matched link. The properties prop will always contain {href: Linkify.MATCH, key: 'LINKIFY_KEY_#'} unless overridden.

Customization

You can access to the global Linkify instance used to linkify contents by importing it (import { linkify } from 'react-linkify'). That way you can customize as needed (e.g. disabling existing schemas or adding new ones).

Note that any customization made to that instance will affect every Linkify component you use.

Examples

All kind of links detectable by linkify-it are supported. For examples, visit their website.