React component to parse links (urls, emails, etc.) in text into clickable links
Renders to:
See examples at
Renders to:
react-linkify (
or
properties The props that will be added to every matched component. type:
NOTE: Use
Note that any customization made to that instance will affect every
Examples
Live examples are available at http://tasti.github.io/react-linkify/.Basic
Any link that appears inside theLinkify
component will become clickable.<Linkify>See examples at tasti.github.io/react-linkify/.</Linkify>
Renders to:
See examples at
tasti.github.io/react-linkify/
.Advanced
If you're feeling lazy, you can wrapLinkify
around anywhere that you want links to become clickable. Even with nested elements, it traverses the tree to find links.<Linkify>
<div>react-linkify <span>(tasti.github.io/react-linkify/)</span></div>
<div>React component to parse links (urls, emails, etc.) in text into clickable links</div>
See examples at tasti.github.io/react-linkify/.
<footer>Contact: tasti@zakarie.com</footer>
</Linkify>
Renders to:
react-linkify (
tasti.github.io/react-linkify/
)
React component to parse links (urls, emails, etc.) in text into clickable links
See examples at tasti.github.io/react-linkify/
.
Contact: tasti@zakarie.com
Installation
yarn add react-linkify
or
npm install react-linkify --save
Usage
import Linkify from 'react-linkify';
React.render(
<Linkify>Examples are available at tasti.github.io/react-linkify/.</Linkify>,
document.body
);
Props
component The type of component to wrap links in. type:any
default: 'a'
properties The props that will be added to every matched component. type:
object
default: {}
NOTE: Use
Linkify.MATCH
as a value to specify the matched link. The properties prop will always contain {href: Linkify.MATCH, key: 'LINKIFY_KEY_#'}
unless overridden.Customization
You can access to the globalLinkify
instance used to linkify contents by importing it (import { linkify } from 'react-linkify'
).
That way you can customize as needed (e.g. disabling existing schemas or adding new ones).Note that any customization made to that instance will affect every
Linkify
component you use.