React-anchorify-text
Create anchor tag with urls in text.
Demo
Installation
npm install --save react-anchorify-text
API
AnchorifyText
Props
AnchorifyTextpropTypes = text: ReactPropTypesstringisRequired linkify: ReactPropTypesobject flags: ReactPropTypesstring nonUrlPartsRenderer: PropTypesfunc;
-
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 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
yarnyarn run start:example
Tests
yarn run test