https://github.com/tasti/react-linkify

React component to parse links (urls, emails, etc.) in text into clickable links
https://github.com/tasti/react-linkify

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/tasti/react-linkify
• Owner: tasti
• License: mit
• Created: 2015-05-29T07:29:56.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2024-01-05T10:04:28.000Z (6 months ago)
• Last Synced: 2024-04-18T15:29:59.812Z (2 months ago)
• Language: JavaScript
• Homepage: http://tasti.github.io/react-linkify/
• Size: 346 KB
• Stars: 547
• Watchers: 3
• Forks: 106
• Open Issues: 50
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Lists

• project-awesome - tasti/react-linkify - React component to parse links (urls, emails, etc.) in text into clickable links (JavaScript)

README

        
# [react-linkify](http://tasti.github.io/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/](http://tasti.github.io/react-linkify/).

### Basic

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

```

See examples at tasti.github.io/react-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.

```

  
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: [email protected]


```

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: `[email protected]`

## Installation

```

yarn add react-linkify

```

or

```

npm install react-linkify --save

```

## Usage

```js

import Linkify from 'react-linkify';

React.render(

  Examples are available at tasti.github.io/react-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](https://github.com/markdown-it/linkify-it) are supported. For

examples, visit [their website](http://markdown-it.github.io/linkify-it/).