En este artículo, vamos a aprender cómo podemos agregar revelaciones de texto en NextJs. NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac. La vinculación de rutas dinámicas ayuda a representar sus componentes NextJS de forma condicional.
Enfoque: para agregar nuestras revelaciones de texto, vamos a utilizar el paquete reaccionar-impresionante-revelar. El paquete react-awesome-reveal nos ayuda a integrar diferentes tipos de revelación de texto. Primero, instalaremos el paquete react-awesome-reveal y luego agregaremos diferentes textos en nuestra página de inicio.
Crear aplicación NextJS: puede crear un nuevo proyecto NextJs usando el siguiente comando:
npx create-next-app gfg
Instale el paquete requerido: ahora instalaremos el paquete react-awesome-reveal usando el siguiente comando:
npm i react-awesome-reveal
Estructura del proyecto: Se verá así.
Agregar revelaciones de texto: después de instalar el paquete react-awesome-reveal, podemos agregar fácilmente diferentes revelaciones de texto en cualquier página de nuestra aplicación. Para este ejemplo, vamos a agregar revelaciones de texto a nuestra página de inicio.
Agregue el siguiente contenido en el archivo index.js :
Javascript
import { Fade,Bounce,Flip } from "react-awesome-reveal"; import React from 'react' export default function Reveal() { return ( <div> <Fade duration='10000'> <p>GeeksforGeeks - Text</p> </Fade> <Flip> <p>Second Text</p> </Flip> <Bounce> <p>Third Text</p> </Bounce> </div> ) }
Explicación: en el ejemplo anterior primero, estamos importando diferentes componentes de revelación de texto como Fade, Bounce y Flip del paquete instalado. Luego estamos usando este componente y configuramos el texto dentro de él. También puede establecer la duración de cada animación utilizando la propiedad de duración.
Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.
npm run dev
Producción:
Publicación traducida automáticamente
Artículo escrito por imranalam21510 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA