Reactjs – Bg Opacity change on scroll

To add a function for background opacity to change, you can use the useRef hook and the useState hook.

First, use the useRef hook to create a reference to the element whose background opacity you want to change. Then, use the useState hook to store the current opacity value.

To change the opacity value, you can use the setState function to set the new opacity value. Then, you can use the ref object to access the element and set the opacity property to the new value.

Here is an example of how to do this:

import React, { useRef, useState } from "react";

const TopbarContainer = ({ children }: { children: ReactNode }) => {
  const ref = useRef<HTMLDivElement>(null);
  const [opacity, setOpacity] = useState(1);

  const handleOpacityChange = (newOpacity: number) => {
    setOpacity(newOpacity);
    ref.current!.style.opacity = newOpacity.toString();
  };

  return (
    <div
      className="sticky top-0 bg-orange backdrop-blur-md"
      ref={ref}
      style={{ opacity }}
    >
      {children}
    </div>
  );
};

Now, you can use the handleOpacityChange function to change the opacity of the top bar container. For example, you could create a button that calls the function with a new opacity value:

<button onClick={() => handleOpacityChange(0.5)}>
  Set opacity to 50%
</button>

You can also use the useState hook to create a slider that allows the user to adjust the opacity value.

const TopbarContainer = ({ children }: { children: ReactNode }) => {
  const ref = useRef<HTMLDivElement>(null);
  const [opacity, setOpacity] = useState(1);

  const handleOpacityChange = (newOpacity: number) => {
    setOpacity(newOpacity);
    ref.current!.style.opacity = newOpacity.toString();
  };

  return (
    <div
      className="sticky top-0 bg-orange backdrop-blur-md"
      ref={ref}
      style={{ opacity }}
    >
      {children}
      <input
        type="range"
        min={0}
        max={1}
        value={opacity}
        onChange={(e) => handleOpacityChange(parseFloat(e.target.value))}
      />
    </div>
  );
};