Skip to content

mobilusoss/react-anchorify-text

Repository files navigation

React-anchorify-text Build Status npm version codebeat badge FOSSA Status codecov

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

FOSSA Status