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 How to find URLs in string and make a link using JavaScript.

Demo Application

Output - Detect URLs in a text and convert them to a link in React - Clue Mediator
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
  2. Use package in component
  3. Output

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.

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.

You can also pass the properties to the Linkify tag and It doesn’t modify links that are already clickable.

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..!! ๐Ÿ™‚

If you found value in this article,
you can support us by buying me a coffee! โ˜•

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *