# react-linkifier

> Finds links in text and converts them to elements

Latest version **4.0.0** (published 2017-10-31) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2017-10-31 |
| First published | 2016-03-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Pedro Ladaria |
| Maintainers | pladaria |
| Keywords | react, links, anchor, linkify, url, anchor, conversor, parser, clickable, text |

## Links

- npm: https://www.npmjs.com/package/react-linkifier
- Repository: https://github.com/pladaria/react-linkifier
- Homepage: https://github.com/pladaria/react-linkifier#readme
- Issues: https://github.com/pladaria/react-linkifier/issues
- npm.io page: https://npm.io/package/react-linkifier

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 4.0.0 (latest) — 2017-10-31
- 3.1.1 — 2017-06-09
- 3.1.0 — 2017-06-09
- 3.0.1 — 2017-04-09
- 3.0.0 — 2017-04-09
- 2.2.1 — 2017-02-22
- 2.1.2 — 2016-09-24
- 2.1.1 — 2016-09-24
- 2.0.0 — 2016-09-24
- 1.1.1 — 2016-09-14
- 1.1.0 — 2016-03-02
- 1.0.0 — 2016-03-01

## README

<p align="center">
    <img src="http://cdn.jsdelivr.net/emojione/assets/svg/2693.svg" width=250 />
    <h1 align="center">react-linkifier</h1>
    <p align="center">Tiny React library to create links from text</p>
    <p align="center"><a href="https://travis-ci.org/pladaria/react-linkifier"><img src="https://travis-ci.org/pladaria/react-linkifier.svg"></p></a>
</p>

## Features

- Very small (~2KB minified and gzipped)
- Zero external dependencies
- Use it as function or component
- Works great with complex URLs and handles many corner cases
- Allows custom props to be applied to &lt;a&gt; elements
- Automatically prepends `http://` to the href or `mailto:` for emails

## Live demo

[Demo](https://runkit.com/pladaria/react-linkifier-demo)

## Install

```javascript
npm install --save react-linkifier
```

## Basic usage

### As component

```javascript
import Linkifier from 'react-linkifier';

const MyComponent = () => (
    <Linkifier>
        <div>check this: www.example.org</div>
    </Linkifier>
);

// Render result:
// <div>
//     <span>check this: </span><a href="http://www.example.org">www.example.org</a>
// </div>
```

### As function

```javascript
import {linkifier} from 'react-linkifier';

const MyComponent = () => (
    <div>
        {linkifier('www.example.org')}
    </div>
);

// Render result:
// <div>
//     <a href=\"http://www.example.org\">www.example.org</a>
// </div>
```

## Advanced usage

### As component

`className` and other props are assigned to the link elements.

```javascript
import Linkifier from 'react-linkifier';

const MyComponent = () => (
    <Linkifier target="_blank" className="my-class">
        <div>www.example.org</div>
    </Linkifier>
);

// Render result:
// <div>
//     <a target=\"_blank\" class=\"my-class\" href=\"http://www.example.org\">www.example.org</a>
// </div>
```

#### With custom renderer
If you want to change the way `<Linkifier />` renders links, for example when you want to use a custom component instead of `<a>`, you can use the `renderer` prop:

```javascript
import Linkifier from 'react-linkifier';

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

const MyComponent = () => (
    <Linkifier renderer={RedLink}>
        <div>www.example.org</div>
    </Linkifier>
);

// Render result:
// <div>
//     <a href=\"http://www.example.org\" style=\"color:red;\">www.example.org</a>
// </div>
```

#### Ignore elements

Use the `ignore` prop to skip some children. By default ignores `a` and `button`

```javascript
const ignore = [...Linkifier.DEFAULT_IGNORED, 'pre'];

const MyComponent = () => (
    <Linkifier ignore={ignore}>
        <pre>
            http://example.org
        </pre>
        <a href="http://example.org">example</a>
        <button>http://example.org</button>
    </Linkifier>
);

// None of these urls will be linkified
```

### As function

```javascript
import {linkifier} from 'react-linkifier';

const text = 'check this: www.example.org';

const MyComponent = () => (
    <div>
        {linkifier(text, {target: '_blank', className: 'link'})}
    </div>
);

// Render result:
// <div>
//     <span>check this: </span>
//     <a target="_blank" class="link" href="http://www.example.org">www.example.org</a>
// </div>
```

#### With custom renderer

When using ``linkifier`` as a function you can also pass a custom renderer:

```javascript
import {linkifier} from 'react-linkifier';

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

const text = 'check this: www.example.org';

const MyComponent = () => (
    <div>
        {linkifier(text, {renderer: RedLink})}
    </div>
);

// Render result:
// <div>
//     <span>check this: </span>
//     <a href="http://www.example.org" style="color:red;">www.example.org</a>
// </div>
```

## Options

- `protocol`: this protocol will be used if the protocol part is missing
- `renderer`: pass a component to use a custom link renderer, defaults to `a`.
- `ignore`: list of elements to ignore (defaults to `['a', 'button']`)
- Rest of properties of the options object (eg: `style`, `className`) or props of the `Linkifier` component are passed as props to the link element

## License

MIT

## Credits

Artwork by [emojione.com](emojione.com)

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