Чем реализовать блок сравнения фото?

Для реализации блока сравнения фото в React можно использовать различные подходы и компоненты. Вот несколько возможных вариантов:

1. Использование стандартных средств React:
- Создайте компонент, который будет отображать две фотографии, например, с помощью компонента img.
- Добавьте движение мыши для управления положением делителя между фотографиями.
- Обработайте событие движения мыши и обновите положение делителя.
- Используйте CSS для изменения размеров и положения фотографий в зависимости от положения делителя.

Пример кода:

   import React, { useState } from 'react';

   const PhotoComparison = () => {
     const [dividerPosition, setDividerPosition] = useState(50);

     const handleMouseMove = (e) => {
       setDividerPosition(e.clientX);
     };

     return (
       <div
         className="photo-comparison"
         onMouseMove={handleMouseMove}
         style={{ cursor: 'col-resize' }}
       >
         <img src="photo1.jpg" alt="Photo 1" style={{ width: `${dividerPosition}%` }} />
         <div className="divider" style={{ left: `${dividerPosition}%` }}></div>
         <img src="photo2.jpg" alt="Photo 2" style={{ width: `${100 - dividerPosition}%` }} />
       </div>
     );
   };

   export default PhotoComparison;

2. Использование специализированных библиотек:
- Установите библиотеку, которая предоставляет готовые компоненты для сравнения фотографий, например, react-compare-image или react-before-after-slider.
- Импортируйте нужный компонент из установленной библиотеки.
- Используйте компонент, передавая ему две ссылки на фотографии и настроив его по своему вкусу.

Пример кода с использованием react-compare-image:

   import React from 'react';
   import { ReactCompareImage } from 'react-compare-image';

   const PhotoComparison = () => {
     return (
       <div className="photo-comparison">
         <ReactCompareImage leftImage="photo1.jpg" rightImage="photo2.jpg" />
       </div>
     );
   };

   export default PhotoComparison;

Пример кода с использованием react-before-after-slider:

   import React from 'react';
   import BeforeAfterSlider from 'react-before-after-slider';

   const PhotoComparison = () => {
     return (
       <div className="photo-comparison">
         <BeforeAfterSlider before="photo1.jpg" after="photo2.jpg" />
       </div>
     );
   };

   export default PhotoComparison;

Оба подхода имеют свои преимущества и недостатки, поэтому выбор зависит от ваших конкретных потребностей и предпочтений. Если вам нужно что-то простое и настраиваемое, то можно воспользоваться первым подходом и реализовать это самостоятельно. Если вам нужна большая гибкость и готовые компоненты, то второй подход с использованием специализированных библиотек может быть лучшим выбором.