css Question posted in
Some basic documentation can be found here.

Css – React useState hook value does not update in a custom tag

I am writing a simple React project testing the lightbox effect using react-photoswipe-gallery. I wrote the onWheel function to implement image zoom in/out on mouse scroll. This function worked just fine for the <div> outside the <Gallery> tag.

However, the same code does not work for the <div> within the <Gallery> tag. I inspected both images inside and outside the <Gallery> tag, while the outside ${pos} changes on mouse scroll, the one inside the <Gallery> remain to ne the initial value.

import { useState } from "react";
import ReactDOM from "react-dom/client";
import { Gallery, Item } from 'react-photoswipe-gallery';
import 'photoswipe/dist/photoswipe.css';

function FavoriteColor() {

  const [pos, setPos] = useState(1);

  const onWheel = (event) => {
    const deltaY = event.deltaY;
    const scaleFactor = 0.1;

    setPos(prevScale => {
      let newScale = prevScale;

      if (deltaY < 0) {
        newScale += scaleFactor;
      } else {
        newScale -= scaleFactor;
      }
      return newScale;
    });

  };


  console.log(pos);
  return (
    <div>
      <div onWheel={onWheel}>
        <img src='https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg' style={{
          transformOrigin: "0 0",
          transform: `scale(${pos})`
        }} />
      </div>

      <Gallery >
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: '240px 171px 171px',
            gridTemplateRows: '114px 114px',
            gridGap: 12,
          }}
        >
          <Item
            content={
              <div onWheel={onWheel}>
                <img className={pos} src='https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg' style={{
                  transformOrigin: "0 0",
                  transform: `scale(${pos})`
                }} />
              </div>}
          >

            {({ ref, open }) => (
              <img
                style={{ cursor: 'pointer' }}
                src="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg"
                ref={ref}
                onClick={open}
              />
            )}
          </Item>
        </div>
      </Gallery>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);
Tags:

2

Answers


  1. 0

    Replace onWheelCapture with onWheel on the div element. This will allow the scroll event to propagate to the child img element as well.

    import { useState } from "react";
import ReactDOM from "react-dom/client";
import { Gallery, Item } from 'react-photoswipe-gallery';
import 'photoswipe/dist/photoswipe.css';

function FavoriteColor() {
  const [color, setColor] = useState("red");

  const smallItemStyles = {
    cursor: 'pointer',
    // objectFit: 'cover',  // Try changing to 'contain'
    width: '100%',
    maxHeight: '100%',
  };

  const [pos, setPos] = useState({ x: 0, y: 0, scale: 1 });

  const onWheel = (e) => {
    const delta = e.deltaY * -0.01;
    const newScale = pos.scale + delta;

    const ratio = 1 - newScale / pos.scale;

    setPos({
      scale: newScale,
      x: pos.x + (e.clientX - pos.x) * ratio,
      y: pos.y + (e.clientY - pos.y) * ratio
    });
    console.log('test');
  };

  return (
    <div>
      <Gallery>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: '240px 171px 171px',
            gridTemplateRows: '114px 114px',
            gridGap: 12,
          }}
        >
          <Item
          content={<div onWheel={onWheel}>  {/* Use onWheel here */}
              <img style={{ ...smallItemStyles, objectFit: 'contain' }}  {/* Add objectFit style to img */}
              src='https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg'/></div>}
          >
            {({ ref, open }) => (
              <img
                style={{ cursor: 'pointer' }}
                src="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg"
                ref={ref}
                onClick={open}
              />
            )}
          </Item>
          {/* Other Item components */}
        </div>
      </Gallery>

    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);
    Login or Signup to reply.
  2. 0 
    import { useState } from "react";
import ReactDOM from "react-dom/client";
import { Gallery, Item } from 'react-photoswipe-gallery';
import 'photoswipe/dist/photoswipe.css';

function FavoriteColor() {

  const [pos, setPos] = useState(1);

  const onWheel = (event) => {
    const deltaY = event.deltaY;
    const scaleFactor = 0.1;

    setPos(prevScale => {
      let newScale = prevScale;

      if (deltaY < 0) {
        newScale += scaleFactor;
      } else {
        newScale -= scaleFactor;
      }
      return newScale;
    });

  };

  console.log(pos);

  return (
    <div>
      <div onWheel={onWheel}>
        <img src='https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg' style={{
          transformOrigin: "0 0",
          transform: `scale(${pos})`
        }} />
      </div>

      <Gallery onWheel={onWheel}>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: '240px 171px 171px',
            gridTemplateRows: '114px 114px',
            gridGap: 12,
          }}
        >
          <Item
            content={
              <div>
                <img className={pos} src='https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg' style={{
                  transformOrigin: "0 0",
                  transform: `scale(${pos})`
                }} />
              </div>}
          >

            {({ ref, open }) => (
              <img
                style={{ cursor: 'pointer' }}
                src="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg"
                ref={ref}
                onClick={open}
              />
            )}
          </Item>
        </div>
      </Gallery>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search