<commit_before># react-linkifier [![Build Status](https://travis-ci.org/pladaria/react-linkifier.svg)](https://travis-ci.org/pladaria/react-linkifier)

Tiny React library to extract URLs from a string and convert them to clickable links.
It will return an array of React components (anchors for links and spans por regular text).

- Very small (~1KB minified and gzipped)
- 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)

## Install

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

## Basic usage

### As component

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

const myComponent = () => (
    <Linkifier>
        check this: www.domain.com
    </Linkifier>
);

// Render result:
// <span>
//    <span>check this: </span><a href="http://www.domain.com">www.domain.com</a>
// </span>
```

### As function

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

const myComponent = () => (
    <div>
        {linkifier('check this: www.domain.com')}
    </div>
);

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

## Advanced usage

### As component

By default the Linkifier component wraps the children with a `span` element, you can override this using the `wrap` prop.

The class name is assigned to the wrapper.

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

const myComponent = () => (
    <Linkifier target="_blank" wrap="div" className="some-text">
        {'check this: www.domain.com'}
        <strong>send me a message: <EMAIL></strong>
    </Linkifier>
);

// Render result:
// <div class="some-text">
//    <span>check this: </span><a target=\"_blank\" href=\"http://www.domain.com\">www.domain.com</a>
//    <strong>
//        <span>send me a message: </span>
//        <a target=\"_blank\" href=\"mailto:<EMAIL>\"><EMAIL></a>
//     </strong>
// </div>

```

### As function

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

const text = 'check this: www.domain.com';

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

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

## License

MIT
<commit_msg>fix typos<commit_after># react-linkifier [![Build Status](https://travis-ci.org/pladaria/react-linkifier.svg)](https://travis-ci.org/pladaria/react-linkifier)

Tiny React library to extract URLs from a string and convert them to clickable links.
It will return an array of React components (anchors for links and spans por regular text).

- Very small (~1KB minified and gzipped)
- 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)

## Install

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

## Basic usage

### As component

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

const myComponent = () => (
    <Linkifier>
        check this: www.domain.com
    </Linkifier>
);

// Render result:
// <span>
//    <span>check this: </span><a href="http://www.domain.com">www.domain.com</a>
// </span>
```

### As function

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

const myComponent = () => (
    <div>
        {linkifier('check this: www.domain.com')}
    </div>
);

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

## Advanced usage

### As component

By default the Linkifier component wraps the children with a `span` element, you can override this using the `wrap` prop.

The class name is assigned to the wrapper.

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

const myComponent = () => (
    <Linkifier target="_blank" wrap="div" className="some-text">
        {'check this: www.domain.com'}
        <strong>send me a message: <EMAIL></strong>
    </Linkifier>
);

// Render result:
// <div class="some-text">
//    <span>check this: </span><a target="_blank" href="http://www.domain.com">www.domain.com</a>
//    <strong>
//        <span>send me a message: </span>
//        <a target="_blank" href="mailto:<EMAIL>"><EMAIL></a>
//     </strong>
// </div>

```

### As function

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

const text = 'check this: www.domain.com';

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

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

## License

MIT

{'fraction_non_alphanumeric': 0.1799919646444355, 'fraction_numerical': 0.0004017677782241864, 'mean_word_length': 3.344677137870855, 'pattern_counts': {'":': 0, '<': 89, '<?xml version=': 0, '>': 97, 'https://': 4, 'lorem ipsum': 0, 'www.': 24, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6375164', 'n_tokens_mistral': 1634, 'n_tokens_neox': 1611, 'n_words': 473}