Friday, August 29, 2025
HomeLanguagesAutolinking in ReactJS

Autolinking in ReactJS

Autolink or Automatically Hyperlinking scans a hypermedia document in a given plain text and automatically makes hyperlinks. It is widely used to differentiate between plain text and phone numbers, emails, URLs, etc. For Example: “Please click https://www.geeksforgeeks.org/”.

For the given text, auto-linking would result in “Please click https://www.geeksforgeeks.org/”.

Here we can see that the particular text https://www.geeksforgeeks.org/ is shown differently than the rest of the text i.e “Please click”, the reason is that it is a URL, not plain text, it detects from the text and makes it a hyperlink.

In, this article, we will see how we can auto-link in a given string using an npm package react-autolink-text2.

Prerequisite:

  • Introduction and installation reactJs

Syntax:

<AutoLinkText text="" />

We pass a string to the text prop of the AutoLink component.

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t then install create-react-app globally by using the command npm -g create-react-app or can install locally by npm i create-react-app.

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Step 3:  now install the dependency react-autolink-text2 by using the following command:

npm i react-autolink-text2

Project Structure: It will look like this:

Example: We are importing AutoLink from react-autolink-text2. In the AutoLinkText component, we are passing a sentence with a link to the text prop. containing a hyperlink as well https://practice.geeksforgeeks.org/courses?utm_source=gfg-article&utm_medium=Q1-2023&utm_campaign=courses.

App.js




import React from "react";
import AutoLinkText from 'react-autolink-text2';
  
function App() {
    return (
        <div className="App">
            <h1> Hey Geek!</h1>
            <AutoLinkText
                text="Go through this link 
                to checkout all our courses. " />
        </div>
    );
}
  
export default App;


Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output:-

We can see that the particular text https://practice.geeksforgeeks.org/courses?utm_source=gfg-article&utm_medium=Q1-2023&utm_campaign=courses is working as a hyperlink.

Reference: https://www.npmjs.com/package/react-autolink-text2#autolinktext-

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
RELATED ARTICLES

Most Popular

Dominic
32246 POSTS0 COMMENTS
Milvus
80 POSTS0 COMMENTS
Nango Kala
6615 POSTS0 COMMENTS
Nicole Veronica
11787 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11835 POSTS0 COMMENTS
Shaida Kate Naidoo
6731 POSTS0 COMMENTS
Ted Musemwa
7011 POSTS0 COMMENTS
Thapelo Manthata
6685 POSTS0 COMMENTS
Umr Jansen
6699 POSTS0 COMMENTS