En este artículo, vamos a aprender cómo podemos agregar componentes arrastrables 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 nuestros componentes arrastrables, vamos a utilizar el paquete de reacción arrastrable. El paquete react-draggable nos ayuda a agregar componentes que se pueden arrastrar en cualquier parte de nuestra aplicación. Primero, instalaremos el paquete que se puede arrastrar y luego agregaremos un componente que se puede arrastrar 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 que se puede arrastrar mediante el siguiente comando:
npm i react-draggable
Estructura del proyecto: Se verá así.
Agregar el componente arrastrable: después de instalar el paquete de reacción arrastrable, podemos agregar fácilmente el componente arrastrable en nuestra aplicación. Para este ejemplo, vamos a agregar un componente arrastrable a nuestra página de inicio.
Agregue el siguiente contenido en el archivo index.js :
Javascript
import Draggable from 'react-draggable';
import React from 'react'
export default function DraggableComponents() {
return (
<div>
<h3>GeeksforGeeks - Draggable Components</h3>
<Draggable>
<div>We can move this text</div>
</Draggable>
</div>
)
}
Explicación: en el ejemplo anterior primero, estamos importando nuestro componente Draggable del paquete instalado. Después de eso, estamos creando una nueva función llamada DraggableComponents y luego estamos usando el Componente Arrastrable que acabamos de importar del paquete instalado.
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