react-anchorify-text
v2.4.1
Published
React component which render text with anchored url(s)
Downloads
4,552
Maintainers
Readme
React-anchorify-text
Create anchor tag with urls in text.
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 urllinkify
: 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 thetext
.~~
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