Detect URLs in a text and convert them to a link in React
In this article, we will show you how to detect URLs/Email in a text and convert them to a link in React. We have already created an article where we have shown you string-and-make-a-link-using-javascript" title="How to find URLs in string and make a link using JavaScript">How to find URLs in string and make a link using JavaScript.
Checkout more articles on ReactJS
- How to implement a circular progress bar in React
- dropdown-in-react" title="MultiSelect dropdown in React">MultiSelect dropdown in React
- bootstrap-modal-popup-using-reactstrap" title="Create bootstrap modal popup using reactstrap">Create bootstrap modal popup using reactstrap
- image-in-react" title="Generate and download a QR code image in React">Generate and download a QR code image in React
Demo Application
Output - Detect URLs in a text and convert them to a link in React - Clue Mediator
Steps to detect URLs in a text and convert them to a link
1. Install NPM package
Here, we will use the react-linkify NPM package to find the URLs, Email Id, etc from content and convert them to a link. Run the following command to install the package.
npm i react-linkify
2. Use package in component
This package is so simple to use. You have to simply wrap the content with the `Linkify` tag as mentioned below.
// Import package
import Linkify from 'react-linkify';
// render an element
<linkify>Please checkout the stack: cluemediator.com/stack.</linkify>
You can also pass the properties to the `Linkify` tag and It doesn't modify links that are already clickable.
<linkify properties={{ target: '_blank', style: { color: '#177c8a' }, }}>
Please checkout the stack: cluemediator.com/stack
<br>
Contact us: [email protected]
<br>
<a href="https://www.cluemediator.com/subscribe">Subscribe Us</a> for
more updates.
</linkify>
3. Output
Run your react component and check the output in the browser.
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
