https://github.com/mobilusoss/react-anchorify-text

Create anchor tag with urls in text.
https://github.com/mobilusoss/react-anchorify-text

react regular-expression

Last synced: about 1 month ago
JSON representation

Create anchor tag with urls in text.

• Host: GitHub
• URL: https://github.com/mobilusoss/react-anchorify-text
• Owner: mobilusoss
• License: mit
• Created: 2015-06-09T10:03:31.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T23:22:07.000Z (about 2 years ago)
• Last Synced: 2024-10-17T03:44:13.213Z (4 months ago)
• Topics: react, regular-expression
• Language: JavaScript
• Homepage: http://mobilusoss.github.io/react-anchorify-text/
• Size: 3.08 MB
• Stars: 8
• Watchers: 2
• Forks: 3
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React-anchorify-text [![Build Status](https://travis-ci.org/mobilusoss/react-anchorify-text.svg?branch=develop)](https://travis-ci.org/mobilusoss/react-anchorify-text) [![npm version](https://badge.fury.io/js/react-anchorify-text.svg)](http://badge.fury.io/js/react-anchorify-text) [![codebeat badge](https://codebeat.co/badges/26eb9d7d-bc90-4351-8a22-ea198e350aff)](https://codebeat.co/projects/github-com-mobilusoss-react-anchorify-text-master) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fmobilusoss%2Freact-anchorify-text.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fmobilusoss%2Freact-anchorify-text?ref=badge_shield) [![codecov](https://codecov.io/gh/mobilusoss/react-anchorify-text/branch/master/graph/badge.svg)](https://codecov.io/gh/mobilusoss/react-anchorify-text)

Create anchor tag with urls in text.

## Demo

[View Demo](http://mobilusoss.github.io/react-anchorify-text/example/)

## Installation

```bash

npm install --save react-anchorify-text

```

## API

### `AnchorifyText`

#### Props

```javascript

AnchorifyText.propTypes = {

  text: React.PropTypes.string.isRequired,

  linkify: React.PropTypes.object,

  flags: React.PropTypes.string,

  nonUrlPartsRenderer: PropTypes.func,

};

```

  * `text`: String to parse url

  * `linkify`: An instance of [linkify-it](https://github.com/markdown-it/linkify-it). default: `new LinkifyIt().tlds(require('tlds'))`

  * `target`: href target for anchor tag, default to "_blank".

  *  `nonUrlPartsRenderer`: callback for non-url parts of the `text`.

  * ~~`regex`: Regular expression as string to detect url .~~

  * ~~`flags`: Regular expression's frag, default to "ig".~~

  `regex` and `flags` props are removed from v2.0.0. Use [linkify-it](https://github.com/markdown-it/linkify-it) instance instead.

#### Children

If no children are passed to `AnchorifyText`, found urls will be rendered as `` tag.

If one child are passed to `AnchorifyText`, found urls are rendered as child tag with `url` as prop.


## Usage example

```javascript

const textWithUrl = "Hello Google(http://google.com) and GitHub => https://github.com/ and Apple(www.apple.com)";

  

```

See  [example](https://github.com/mobilusoss/react-anchorify-text/tree/develop/example)

```bash

yarn

yarn run start:example

```

## Tests

```bash

yarn run test

```

## Update dependencies

Use [npm-check-updates](https://www.npmjs.com/package/npm-check-updates)

## License

[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fmobilusoss%2Freact-anchorify-text.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fmobilusoss%2Freact-anchorify-text?ref=badge_large)