Зміна зображень при наведенні: Бази даних / API в React

Отже, коротка історія: я працював над проектом, який вимагав використання кількох зображень, що слугували картками контактів, схожими на список користувачів чи фільмів. Те, що я хотів досягти, — це щоб при наведенні курсору на кожне зображення воно змінювалося на інше.

Дехто міг би сказати, що це можна легко досягти, використовуючи властивість CSS hover, наприклад, так:

// Стилі для ефекту при наведенні image.css
.image-hover {
  width: 300px;
  height: 200px;
  background-image: url('default-image.jpg');
  background-size: cover;
  transition: background-image 0.5s ease-in-out;
}

.image-hover:hover {
  background-image: url('hover-image.jpg');
}

// Контейнери з зображеннями в них image.js

Це здається простим і може виконати свою роботу для кількох випадків. Але є обмеження: уявіть, що у вас є 4–5 різних зображень. Тепер вам доведеться писати різні класи для кожного div і оголошувати стилі для кожного з них. Напевно, це виглядало б ось так:

 // Стилі для ефекту при наведенні image.css
 .image-hover-1 {
   width: 300px;
   height: 200px;
   background-image: url('default-image-1.jpg');
   background-size: cover;
   transition: background-image 0.5s ease-in-out;
 }

 .image-hover-1:hover {
   background-image: url('hover-image-1.jpg');
 }

 .image-hover-2 {
   width: 300px;
   height: 200px;
   background-image: url('default-image-2.jpg');
   background-size: cover;
   transition: background-image 0.5s ease-in-out;
 }

 .image-hover-2:hover {
   background-image: url('hover-image-2.jpg');
 }
 . . . . 
 .image-hover-n {
   width: 300px;
   height: 200px;
   background-image: url('default-image-n.jpg');
   background-size: cover;
   transition: background-image 0.5s ease-in-out;
 }

 .image-hover-n:hover {
   background-image: url('hover-image-n.jpg');
 }

 // Контейнери з зображеннями в них image.js
 . . . .

Дехто каже, що є кращі способи це зробити, використовуючи nth child. Звісно, тоді ваш код виглядатиме ось так:

 // Стилі для ефекту при наведенні image.css
 .image-hover {
   width: 300px;
   height: 200px;
   background-size: cover;
   transition: background-image 0.5s ease-in-out;
 }

 .image-hover:nth-child(1) {
   background-image: url('default-image-1.jpg');
 }

 .image-hover:nth-child(2) {
   background-image: url('default-image-2.jpg');
 }

 .image-hover:nth-child(n) {
   background-image: url('default-image-n.jpg');
 }

 /* Стилі при наведенні */
 .image-hover:nth-child(1):hover {
   background-image: url('hover-image-1.jpg');
 }

 .image-hover:nth-child(2):hover {
   background-image: url('hover-image-2.jpg');
 }

 .image-hover:nth-child(n):hover {
   background-image: url('hover-image-n.jpg');
 }

 // Стилі для ефекту при наведенні image.css

Код виглядає трохи краще, але все одно вам доведеться визначати зображення n разів для вашого випадку, і вам потрібно мати уже готову адресу для кожного зображення. Якщо ви хочете, щоб ваш вебсайт був динамічним і не потребував змін у коді кожного разу, коли ви додаєте нові зображення або видаляєте старі,
Ви могли б подумати про підключення цього до бази даних, але наведені вище приклади не зможуть допомогти у такому випадку.

Ось приклад коду на React, який можна використати для підключення вашого сайту до API, щоб ваш код був чистим, зрозумілим і зручним для управління.

import React, { useState, useEffect } from 'react';  

const ImageList = () => {  
 const [hoveredImage, setHoveredImage] = useState(null);  
 const [imageData, setImageData] = useState([]); // Стан для зберігання даних зображень  

 // Отримання даних з API  
 useEffect(() => {  
 const fetchData = async () => {  
 try {  
 const response = await fetch('https://api.example.com/images'); // Замість цього використовуйте реальний кінцевий API  
 const data = await response.json();  
 setImageData(data); // Встановлюємо отримані дані у стан  
 } catch (error) {  
 console.error('Помилка при отриманні даних зображень:', error);  
 }  
 };  

 fetchData();  
 }, []); // Порожній масив залежностей забезпечує, що цей код виконається тільки при монтуванні компонента  

 // Обробка подій mouse enter та mouse leave  
 const handleMouseEnter = (index) => {  
 setHoveredImage(index);  
 };  

 const handleMouseLeave = () => {  
 setHoveredImage(null);  
 };  

 return (  
   <div className="image_list">  
     {imageData.map((imageItem, index) => (    
       <div  
         key={index}  
         className="image_tile"  
         onMouseEnter={() => handleMouseEnter(index)}  
         onMouseLeave={handleMouseLeave}  
       >        
         <img src={imageItem.url} alt={imageItem.alt} />  
       </div>  
     ))}    
   </div>  
 );  
};  
export default ImageList;  

// style.css  
.image_list {  
  display: flex;  
  gap: 16px;  
  flex-wrap: wrap;  
}  

.image_tile {  
  width: 100px;  
  height: 100px;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  transition: transform 0.3s ease;  
}  

.image_tile:hover {  
  transform: scale(1.1);  
}  

img {  
  width: 80px;  
  height: 80px;  
  object-fit: cover;  
}  

За допомогою цього ви можете інтегрувати API в ваш код і отримувати останні зображення з бази даних або серверу на бекенді. Більше не потрібно хардкодити зображення і перерозгортати фронтенд. Також це може покращити досвід користувачів.

Перекладено з: Image Change on Hover : Database/APIs in React