react-linkifier
Tiny React library to create links from text
Features
- Very small (~2KB minified and gzipped)
- Zero external dependencies
- Use it as function or component
- Works great with complex URLs and handles many corner cases
- Allows custom props to be applied to <a> elements
- Automatically prepends
http://
to the href ormailto:
for emails
Live demo
Install
npm install --save react-linkifier
Basic usage
As component
; const MyComponent = <Linkifier> <div>check this: wwwexampleorg</div> </Linkifier>; // Render result:// <div>// <span>check this: </span><a href="http://www.example.org">www.example.org</a>// </div>
As function
; const MyComponent = <div> </div>; // Render result:// <div>// <a href=\"http://www.example.org\">www.example.org</a>// </div>
Advanced usage
As component
className
and other props are assigned to the link elements.
; const MyComponent = <Linkifier target="_blank" className="my-class"> <div>wwwexampleorg</div> </Linkifier>; // Render result:// <div>// <a target=\"_blank\" class=\"my-class\" href=\"http://www.example.org\">www.example.org</a>// </div>
With custom renderer
If you want to change the way <Linkifier />
renders links, for example when you want to use a custom component instead of <a>
, you can use the renderer
prop:
; const RedLink = <a href=href style=color: 'red'> children </a>; const MyComponent = <Linkifier renderer=RedLink> <div>wwwexampleorg</div> </Linkifier>; // Render result:// <div>// <a href=\"http://www.example.org\" style=\"color:red;\">www.example.org</a>// </div>
Ignore elements
Use the ignore
prop to skip some children. By default ignores a
and button
const ignore = ...LinkifierDEFAULT_IGNORED 'pre'; const MyComponent = <Linkifier ignore=ignore> <pre> http://example.org </pre> <a href="http://example.org">example</a> <button>http://example.org</button> </Linkifier>; // None of these urls will be linkified
As function
; const text = 'check this: www.example.org'; const MyComponent = <div> </div>; // Render result:// <div>// <span>check this: </span>// <a target="_blank" class="link" href="http://www.example.org">www.example.org</a>// </div>
With custom renderer
When using linkifier
as a function you can also pass a custom renderer:
; const RedLink = <a href=href style=color: 'red'> children </a>; const text = 'check this: www.example.org'; const MyComponent = <div> </div>; // Render result:// <div>// <span>check this: </span>// <a href="http://www.example.org" style="color:red;">www.example.org</a>// </div>
Options
protocol
: this protocol will be used if the protocol part is missingrenderer
: pass a component to use a custom link renderer, defaults toa
.ignore
: list of elements to ignore (defaults to['a', 'button']
)- Rest of properties of the options object (eg:
style
,className
) or props of theLinkifier
component are passed as props to the link element
License
MIT
Credits
Artwork by emojione.com