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.neveropen.co.za/”.
For the given text, auto-linking would result in “Please click https://www.neveropen.co.za/”.
Here we can see that the particular text https://www.neveropen.co.za/ 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.neveropen.co.za/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.neveropen.co.za/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-
