Autoenlace en ReactJS

Autolink o Automatically Hyperlinking escanea un documento hipermedia en un texto sin formato determinado y crea hipervínculos automáticamente. Se usa ampliamente para diferenciar entre texto sin formato y números de teléfono, correos electrónicos, URL, etc. Por ejemplo: «Haga clic en https://www.geeksforgeeks.org/».

Para el texto dado, el enlace automático daría como resultado «Haga clic en https://www.geeksforgeeks.org/».

Aquí podemos ver que el texto particular https://www.geeksforgeeks.org/ se muestra de manera diferente al resto del texto, es decir, «Haga clic en», la razón es que es una URL, no texto sin formato, se detecta desde el texto y lo convierte en un hipervínculo.

En este artículo, veremos cómo podemos vincular automáticamente una string dada usando un paquete npm react-autolink-text2 .

Requisito previo:

• Introducción e instalación de reactJs

Sintaxis:

<AutoLinkText text="" />

Pasamos una string al accesorio de texto del componente AutoLink.

Creación de la aplicación React y la instalación del módulo:

Paso 1: cree la carpeta del proyecto de reacción, para eso abra la terminal y escriba el comando npm create-react-app folder name, si ya instaló create-react-app globalmente. Si no lo ha hecho, instale create-react-app globalmente usando el comando npm -g create-react-app o puede instalarlo localmente con npm i create-react-app .

npm create-react-app project

Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando.

cd project

Paso 3:  ahora instala la dependencia react-autolink-text2 usando el siguiente comando:

npm i react-autolink-text2

Estructura del proyecto: Se verá así:

Ejemplo: estamos importando AutoLink desde react-autolink-text2. En el componente AutoLinkText, estamos pasando una oración con un enlace a la propiedad de texto. que contiene también un hipervínculo https://practice.geeksforgeeks.org/courses.

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://practice.geeksforgeeks.org/courses 
                to checkout all our courses. " />
        </div>
    );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto.

npm start

Producción:-

Podemos ver que el texto en particular https://practice.geeksforgeeks.org/courses funciona como un hipervínculo.

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