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: 7 months 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 10 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T23:22:07.000Z (almost 3 years ago)
- Last Synced: 2025-01-07T13:03:13.146Z (10 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 [](https://travis-ci.org/mobilusoss/react-anchorify-text) [](http://badge.fury.io/js/react-anchorify-text) [](https://codebeat.co/projects/github-com-mobilusoss-react-anchorify-text-master) [](https://app.fossa.io/projects/git%2Bgithub.com%2Fmobilusoss%2Freact-anchorify-text?ref=badge_shield) [](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
[](https://app.fossa.io/projects/git%2Bgithub.com%2Fmobilusoss%2Freact-anchorify-text?ref=badge_large)