Question: I try to switch from an image to another one when scrolling with React but I don't know how to do this... maybe with React hook. I know it's possible with jQuery but I don't want to use it.

Example here: <https://www.apple.com/iphone-12/>, look at the "Five fresh finishes".

[![Apple](https://i.stack.imgur.com/VzT4T.gif)](https://i.stack.imgur.com/VzT4T.gif)

```
import React, {useState} from 'react';
import './BackgroundDiscover.css';
import logoOrdiW from "../../images/mathis_computer_white.jpg";
import logoOrdiB from "../../images/mathis_computer_black.jpg";

const BackgroundDiscover = () => {
    const [imageSrc, SetSrc] = useState(logoOrdiW);
    const switchBrackground = () => {
        SetSrc(logoOrdiB);
    }
    return (
        <>
            <div className="container-discover">
                <div className='container-logo-white'>
                    <img src={imageSrc} alt="logo ordinateur mathis blanc" onScroll={switchBrackground}/>
                </div>
            </div>
        </>
    );
};

export default BackgroundDiscover;

```

```
.container-discover {
    display: flex;
    flex-direction: column;
}

.container-logo-white img {
    width: 100%;
}

.container-logo-black img {
    width: 100%;
}

```

Answer: 
There are plenty of solutions for this but basically you can set in this way.
Wheel event listener turns either positive or negative value so you should create an algorithm if you want to impelement different designs.

```
import React, { useState } from "react";
export default function App() {
  const [bgImage, handleImage] = useState(
    "https://media.wired.com/photos/5e9f56f143e5800008514457/1:1/w_1277,h_1277,c_limit/Gear-Feature-Apple_new-iphone-se-white_04152020.jpg"
  );
  window.addEventListener("wheel", (e) => {
    if (e.deltaY > 0) {
      handleImage(
        "https://media.wired.com/photos/5bcea2642eea7906bba84c67/master/w_2560%2Cc_limit/iphonexr.jpg"
      );
    } else {
      handleImage(
        "https://media.wired.com/photos/5e9f56f143e5800008514457/1:1/w_1277,h_1277,c_limit/Gear-Feature-Apple_new-iphone-se-white_04152020.jpg"
      );
    }
  });

  return (
    <div className="App">
      <img
        style={{ width: "400px", height: "300px" }}
        id="myimage"
        src={bgImage}
        alt=""
      />
    </div>
  );
}

```

And as a result you can use `bgImage` state in your image src.

This is a codesandbox example <https://codesandbox.io/s/pensive-vaughan-cfc63?fontsize=14&hidenavigation=1&theme=dark>
You can try useEffect and useRef.

useEffect is sideload functions, and useRef is for real dom referances.

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

import logoOrdiW from "../../images/mathis_computer_white.jpg";
import logoOrdiB from "../../images/mathis_computer_black.jpg";

import './BackgroundDiscover.css';

const BackgroundDiscover = () => {
  const img = useRef();
  const [src, setSrc] = useState(logoOrdiW);
  const switchBrackground = () => {
    setSrc(logoOrdiB);
  }
  useEffect(() => {
    img.current.onscroll = switchBrackground;
  }, []);

  return (
    <div className="container-discover">
      <div className='container-logo-white'>
        <img src={src} alt="logo ordinateur mathis blanc" ref={img} />
      </div>
    </div>
  );
};

export default BackgroundDiscover;

```