react-anchorify-text

2.4.1 • Public • Published

React-anchorify-text Build Status npm version codebeat badge

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

Package Sidebar

Install

npm i react-anchorify-text

Weekly Downloads

28

Version

2.4.1

License

MIT

Unpacked Size

249 kB

Total Files

19

Last publish

Collaborators

  • georgeosddev