¿Cómo crear una caja de luz de imagen con la funcionalidad Acercar y Alejar en ReactJS?

En este artículo, aprenderá a crear una caja de luz de imagen con la funcionalidad Acercar y Alejar en React. Entonces, comencemos instalando reaccionar usando el comando create-react-app.

Creación de la aplicación React e instalación de los módulos necesarios:
 

• Creación de la aplicación React. 
   

npx create-react-app myapp

• Ahora instalaremos una dependencia usando npm llamada react-image-lightbox , 
   

npm i react-image-lightbox

Estructura del proyecto: Después de hacer estas instalaciones. Nuestra estructura de carpetas se vería así.
 

Ahora estaremos trabajando en el archivo App.js. En este archivo primero, importaremos el componente Lightbox desde «react-image-lightbox». Ahora cree una array vacía. Esta array contendrá la fuente de las imágenes que desea que se muestren en la caja de luz. Ahora, en la función de la aplicación, crearemos la interfaz de usuario y toda la funcionalidad relacionada con LightBox. La interfaz de usuario según este artículo será muy simple, puede cambiar la interfaz de usuario según el requisito. La interfaz de usuario contendrá un botón simple. Cuando se hace clic en este botón, se activará el modal para que la caja de luz se abra.

Nombre de archivo: src/App.js El código para la interfaz de usuario es el siguiente.

import React, { useState } from "react";
import Lightbox from "react-image-lightbox";
import "react-image-lightbox/style.css";
import "./App.css";
 
const arrOfImages = [
  "https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png",
  "https://www.geeksforgeeks.org/wp-content/uploads/CSS-768x256.png",
  "https://www.geeksforgeeks.org/wp-content/uploads/php-1-768x256.png",
];
 
function App() {
  const [indexOfImages, setIndexOfImages] = useState(0);
  const [showModal, setShowModal] = useState(false);
 
  return (
    <div className="App">
      <h1 style={{ color: "white" }}>
        Image Slide Show With Zoom In/Out feature
      </h1>
      {arrOfImages.map((image, index) => (
        <img
          key={image}
          style={{ height: "200px", width: "300px", margin: "20px" }}
          src={image}
          alt={image}
          onClick={() => (setIndexOfImages(index))}
           
        />
      ))}
 
      <div>
        <button type="button" onClick={() => setShowModal(true)}>
          Show Lightbox
        </button>
      </div>
 
    </div>
  );
}
 
export default App;

Producción: 
 

Ahora agregaremos el componente lightbox a nuestra aplicación de reacción. El arrOfImages contiene la URL de nuestras imágenes de origen. Usaremos el gancho useState para cambiar el estado, un gancho abrirá y cerrará el modal que contiene el Modal. El otro gancho cambiará el índice de la imagen principal. Cuando se ha hecho clic en el botón, el estado de showModal cambia a verdadero y el componente LightBox se procesa. En la barra de herramientas de Lightbox, veremos los botones para cerrar el modal y también para acercar o alejar la imagen principal. Además, hay dos botones, uno para deslizarse a la siguiente imagen y el otro para deslizarse a la imagen anterior. Para mostrar la siguiente imagen en el botón, haga clic en el índice de la imagen actual se cambia a través de la función setIndexOfImages.

Nombre de archivo- src/App.js:

import React, { useState } from "react";
import Lightbox from "react-image-lightbox";
import "react-image-lightbox/style.css";
import "./App.css";
 
const arrOfImages = [
  "https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png",
  "https://www.geeksforgeeks.org/wp-content/uploads/CSS-768x256.png",
  "https://www.geeksforgeeks.org/wp-content/uploads/php-1-768x256.png",
];
function App() {
  const [indexOfImages, setIndexOfImages] = useState(0);
  const [showModal, setShowModal] = useState(false);
  const openModalAndSetIndex = (index) => {
    setIndexOfImages(index);
    setShowModal(true);
    return;
  };
  return (
    <div className="App">
      <h1>Image Slide Show With Zoom In/Out feature</h1>
 
      {arrOfImages.map((image, index) => (
        <img
          key={image}
          style={{ height: "200px", width: "300px", margin: "20px" }}
          src={image}
          alt={image}
          onClick={() => openModalAndSetIndex(index)}
        />
      ))}
 
      <div>
        <button type="button" onClick={() => setShowModal(true)}>
          Show Lightbox
        </button>
      </div>
 
      {showModal && (
        <Lightbox
          mainSrc={arrOfImages[indexOfImages]}
          nextSrc={arrOfImages[(indexOfImages + 1) % arrOfImages.length]}
          prevSrc={
            arrOfImages[
              (indexOfImages + arrOfImages.length - 1) % arrOfImages.length
            ]
          }
          onCloseRequest={() => setShowModal(false)}
          onMovePrevRequest={() =>
            setIndexOfImages(
              (indexOfImages + arrOfImages.length - 1) % arrOfImages.length
            )
          }
          onMoveNextRequest={() =>
            setIndexOfImages(
              (indexOfImages + arrOfImages.length + 1) % arrOfImages.length
            )
          }
        />
      )}
    </div>
  );
}
 
export default App;

Producción: