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,
  regex: React.PropTypes.string,
  flags: React.PropTypes.string,
  target: React.PropTypes.string
};

• text: String to parse url

• regex: Regular expression as string to detect url . Default to

  '\\b((?:[a-z][\\w-]+:(?:\\/{1,3}|[a-z0-9%])|www\\d{0,3}[.]|[a-z0-9.\\-]+[.][a-z]{2,4}\\/)(?:[^\\s()<>]+|\\(([^\\s()<>]+|(\\([^\\s()<>]+\\)))*\\))+(?:\\(([^\\s()<>]+|(\\([^\\s()<>]+\\)))*\\)|[^\\s`!()\\[\\]{};:' + "'" + '.,<>?«»“”‘’]))',

  from http://stackoverflow.com/questions/17733236/optimize-gruber-url-regex-for-javascript

• flags: Regular expression's frag, default to "ig".

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

  passed regex and flags will be used as new Regex(this.props.regex, this.props.flags)

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