React-anchorify-text

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,
  nonUrlPartsRenderer: PropTypes.func,
};

• 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".

• 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 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

yarn
yarn run start:example

Tests

yarn run test

Update dependencies

Use npm-check-updates

License