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.
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://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-