Autolinking in ReactJS

In React, 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/”.

Prerequisite:

• NPM & Node.js
• React JS

Approach:

To use the Autolinking in React we will use the AutoLinkText Component from the npm package react-autolink-text2. This component scans the text given in text prop for any links adds that link as a hyperlink to the text and renders on the UI.

Syntax:

<AutoLinkText text="" />

Steps to Create React Application and Module Installation:

Step 1: Use this command in the terminal to initialize the react project.

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: Install the dependency react-autolink-text2 by using the following command:

npm i react-autolink-text2

Project Structure:

The updated dependencies in package.json file.

"dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-autolink-text2": "^3.3.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
},

Example: This example uses the AutoLinkText component from the react-autolink-text2 to implement the Autolinking.

Javasript

// Filename - 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
https://www.geeksforgeeks.org/courses?utm_source=gfg-article&utm_medium=Q1-2023&utm_campaign=courses
                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: This output will be visible on the http://localhost:3000 on the browser window.

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