Skip to content

mobilusoss/react-anchorify-text

Folders and files

NameName
Last commit message
Last commit date

Latest commit

0abfb73 · Dec 14, 2020

History

83 Commits
Jun 4, 2019
Jul 16, 2019
Jul 1, 2019
Jul 1, 2019
Jul 16, 2019
Jul 19, 2019
Jun 9, 2015
Jun 9, 2015
Jun 9, 2015
Jun 9, 2015
Jul 2, 2019
Jul 16, 2019
Jun 4, 2019
Jul 19, 2019
Jul 19, 2019
Jul 22, 2019
Dec 11, 2020

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