Hi! I'm loving this lib, but I'm having trouble trying to update the props of a parall

I believe I've figured it out: <div class="highlight highlight-source-ts notransla

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Update props of parallax element about react-scroll-parallax HOT 2 CLOSED

mephistia commented on September 27, 2024

Update props of parallax element

from react-scroll-parallax.

Comments (2)

mephistia commented on September 27, 2024

I believe I've figured it out:

const parallaxElements = parallaxController?.getElements();

const refId = parallaxElements?.find((entry) => entry.el.isEqualNode(ref.current))?.id || 0;

parallaxController?.updateElementPropsById(refId, newProps);

But it would be nice to update the docs informing where does this id come from

from react-scroll-parallax.

jscottsmith commented on September 27, 2024

@mephistia

There's no need to do all this extra work. Just use the tools React gives you to pass in new values to the useParallax hook. It will do all this updating for you automatically.

See the example below, which adds an isMobile state which is then updated by the resize event listener. If isMobile is true, we pass a different set of scale values to the parallax hook.

function Example() {
  const [isMobile, setIsMobile] = useState(false);

  const { ref } = useParallax<HTMLDivElement>({
    // change any values based on React state
    scale: isMobile ? [2, 1] : [1, 2]
  });

  function handleResize() {
    if (window.innerWidth < MOBILE_MAX_WIDTH) {
      setIsMobile(true);
    } else {
      setIsMobile(false);
    }
  }

  useEffect(() => {
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return (
    <div className="parallax-element" ref={ref}>
  );
}