2.4.1 • Published 5 years ago
react-anchorify-text v2.4.1
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
andflags
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