react-simple-linkify
A simple React library for parsing text with urls to make them clickable or customized via React components
Installation
yarn react-simple-linkify
or
npm install react-simple-linkify
Usage
Importing
As React component
;
As function
;
Using as React component is a better way because Linkify
component is memoized.
Linkifying
<Linkify> Some useful description: https://github.com/yurkagon/react-simple-linkify. That is an youtube video: https://www.youtube.com/watch?v=9NSzl8DtdM4</Linkify>
or
;
Renders to:
Some useful description: <a href="https://github.com/yurkagon/react-simple-linkify">https://github.com/yurkagon/react-simple-linkify</a>. That is an youtube video:<a href="https://www.youtube.com/watch?v=9NSzl8DtdM4">https://www.youtube.com/watch?v=9NSzl8DtdM4</a>
Using custom React components
Let's write some url enhancer:
const UrlEnhancer = { const url = props; if return <YouTubePlayer url=url /> ; return <a href=url rel="noopener noreferrer" target="_blank"> url </a> ;}
And let's use it:
<Linkify component=UrlEnhancer> Some useful description: https://github.com/yurkagon/react-simple-linkify. That is an youtube video: https://www.youtube.com/watch?v=9NSzl8DtdM4</Linkify>
or
;
Renders to:
Some useful description: <a href="https://github.com/yurkagon/react-simple-linkify" rel="noopener noreferrer" target="_blank">https://github.com/yurkagon/react-simple-linkify</a>. That is an youtube video:/* shallow render of mocked component */<YouTubePlayer url="https://www.youtube.com/watch?v=9NSzl8DtdM4" />
Prop types
LinkifypropTypes = children: PropTypesstringisRequired component: PropTypesfunc;