# @amit.rajput/react-linkify

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

Latest version **1.0.5** (published 2022-10-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @amit.rajput/react-linkify
pnpm add @amit.rajput/react-linkify
yarn add @amit.rajput/react-linkify
bun add @amit.rajput/react-linkify
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2022-10-11 |
| First published | 2022-07-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 17.5 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| Author | Amit Rajput |
| Maintainers | amit.rajput |
| Keywords | react-linkify, react, linkify, react-component, link, url, email, autolink, urlize, urlify |

## Links

- npm: https://www.npmjs.com/package/@amit.rajput/react-linkify
- Repository: https://github.com/amitrajput1992/react-linkify
- Homepage: https://github.com/amitrajput1992/react-linkify/
- Issues: https://github.com/amitrajput1992/react-linkify/issues
- npm.io page: https://npm.io/package/@amit.rajput/react-linkify

## Dependencies (2)

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

## 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.5 (latest) — 2022-10-11
- 1.0.4 — 2022-09-23
- 1.0.1 — 2022-07-06

## README

[![Build Status](https://app.travis-ci.com/amitrajput1992/react-linkify.svg?branch=master)](https://app.travis-ci.com/amitrajput1992/react-linkify)

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

> Forked from the amazing https://github.com/tasti/react-linkify repo, converted to use latest features of typescript and react, ESM and CJS bindings

### Basic

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

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

Renders to:

See examples at `amitrajput1992.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>(amitrajput1992.github.io/react-linkify/)</span></div>
    <div>React component to parse links (urls, emails, etc.) in text into clickable links</div>   
</Linkify>
```

Renders to:

react-linkify (`amitrajput1992.github.io/react-linkify/`)
React component to parse links (urls, emails, etc.) in text into clickable links


## Installation

```
yarn add @amit.rajput/react-linkify
```

or

```
npm install @amit.rajput/react-linkify --save
```

or

```
pnpm i @amit.rajput/react-linkify --save
```

## Usage

```js
import Linkify from '@amit.rajput/react-linkify';

React.render(
  <Linkify>Examples are available at amitrajput1992.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 '@amit.rajput/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/@amit.rajput/react-linkify · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._