# react-linkify

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

Latest version **1.0.0-alpha** (published 2019-05-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-linkify
pnpm add react-linkify
yarn add react-linkify
bun add react-linkify
```

## Health

**Score 23/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-alpha |
| Published | 2019-05-30 |
| First published | 2015-06-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-linkify) |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 18.3 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| Author | Tasti Zakarie |
| Maintainers | tasti |
| Keywords | react-linkify, react, linkify, react-component, link, url, email, autolink, urlize, urlify |

## Links

- npm: https://www.npmjs.com/package/react-linkify
- Repository: https://github.com/tasti/react-linkify
- Homepage: http://tasti.github.io/react-linkify/
- Issues: https://github.com/tasti/react-linkify/issues
- npm.io page: https://npm.io/package/react-linkify

## Dependencies (2)

- [tlds](https://npm.io/package/tlds.md) ^1.199.0
- [linkify-it](https://npm.io/package/linkify-it.md) ^2.0.3

## Alternatives

- [@expo/fingerprint](https://npm.io/package/@expo/fingerprint.md) — 6.2M weekly downloads
- [@azure/monitor-opentelemetry-exporter](https://npm.io/package/@azure/monitor-opentelemetry-exporter.md) — 850.0K weekly downloads
- [@azure/monitor-opentelemetry](https://npm.io/package/@azure/monitor-opentelemetry.md) — 624.0K weekly downloads
- [@posthog/ai](https://npm.io/package/@posthog/ai.md) — 423.3K weekly downloads
- [fakefilter](https://npm.io/package/fakefilter.md) — 63.9K weekly downloads

## Recent versions

- 1.0.0-alpha (latest) — 2019-05-30
- 0.2.2 — 2018-01-05
- 0.2.1 — 2017-05-11
- 0.2.0 — 2017-02-09
- 0.1.3 — 2016-08-26
- 0.1.2 — 2016-08-13
- 0.1.1 — 2015-11-26
- 0.1.0 — 2015-11-25
- 0.0.5 — 2015-10-02
- 0.0.4 — 2015-06-04
- 0.0.3 — 2015-06-02
- 0.0.2 — 2015-06-01
- 0.0.1 — 2015-06-01

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

```
<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: tasti@zakarie.com</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: `tasti@zakarie.com`


## Installation

```
yarn add react-linkify
```

or

```
npm install react-linkify --save
```

## Usage

```js
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](https://github.com/markdown-it/linkify-it) are supported. For
examples, visit [their website](http://markdown-it.github.io/linkify-it/).

---
_Source: https://npm.io/package/react-linkify · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._