Create anchor tag with urls in text.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
lib
src
test/components
.babelrc
.editorconfig
.eslintignore
.eslintrc
.gitignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
karma.conf.js
package.json
yarn.lock

README.md

React-anchorify-text Build Status npm version

Create anchor tag with urls in text.

Demo

View Demo

Installation

npm install --save react-anchorify-text

API

AnchorifyText

Props

AnchorifyText.propTypes = {
  text: React.PropTypes.string.isRequired,
  linkify: React.PropTypes.object,
  flags: React.PropTypes.string,
};
  • text: String to parse url

  • linkify: An instance of linkify-it. default: new LinkifyIt().tlds(require('tlds'))

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

  • 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 instance instead.

Children

If no children are passed to AnchorifyText, found urls will be rendered as <a> tag. If one child are passed to AnchorifyText, found urls are rendered as child tag with url as prop.

Usage example

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

<AnchorifyText text={textWithUrl}></AnchorifyText>

<AnchorifyText text={textWithUrl}>
  <MyCustomAnchor></MyCustomAnchor>
</AnchorifyText>

See example

npm install
npm run start:example

Tests

npm test