Перемещение фонов с помощью мыши ReactJS

Question

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

Я нашел эту статью и попытался создать третий пример, но не смог вставить его в свой код.

Это код моего Модального. js и стиля. js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Container, Image } from './styles';

export default class Modal extends Component {
  onClose = e => {
    this.props.onClose && this.props.onClose(e);
  };

  render() {
    if (!this.props.show) {
      return null;
    }
    return (
      <Container>
        <button type="submit" onClick={this.onClose}>
          close
        </button>
        <Image>
          <div> /*This is <img src={image}/>*/{this.props.children}</div>
        </Image>
      </Container>
    );
  }
}
Modal.propTypes = {
  onClose: PropTypes.func.isRequired,
  show: PropTypes.bool.isRequired,
};

Стили. js

import styled from 'styled-components';

export const Container = styled.div`
  position: fixed;
  max-width: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  padding-top: 30px;
  padding-bottom: 30px;
  z-index: 5;
  background: rgba(0, 0, 0, 0.5);

  > button {
    border: 0;
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: #7159c1;
    margin-top: 10px;
    margin-right: 30px;
    right: 0;
    top: 0;
  }
`;
export const Image = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  padding: 0 10%;
  border: 1px solid #f00;
  background: #ebedee;

  img {
    position: fixed;
    transform: scale(1);
    background-repeat: no-repeat;
    background-position: 0;
    transition: background-position 0.25s;
  }
`;

Answer 1

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