Request for Help with Scroll Containers

[SEovaldi]

Maybe its because Im using React 18 but Im having trouble duplicating the example for a Scroll Container.

What Im trying to accomplish: I have a div that has a list of items in that overflow: scrolls. So Im trying to have parallax only occur in that div and only when Im hovering over and scrolling it. Scrolling the document body shouldn't have any effect on it.

I believe scroll container is what I want based on the documentation. Im going off of this Docs: https://react-scroll-parallax.damnthat.tv/docs/usage/components/parallax-provider#scroll-container and this example: https://react-scroll-parallax-v3.surge.sh/?path=/docs/components-parallax-vertical-scroll--inside-a-div

So I tried this straight from the docs:

import * as React from 'react';
import { ParallaxProvider } from 'react-scroll-parallax';

const ScrollContainer = () => {
  const [scrollEl, setScrollElement] = React.useState<HTMLDivElement>(null);
  const ref = React.useRef<HTMLDivElement>();
  React.useEffect(() => {
    setScrollElement(ref.current);
  });

  return (
    <div className="your-scroll-container" ref={ref}>
      <ParallaxProvider scrollContainer={scrollEl}>
        {props.children}
      </ParallaxProvider>
    </div>
  );
};

But it gives an error

Type '{ children: ReactNode; scrollContainer: HTMLElement | undefined; scrollAxis: "vertical" | "horizontal" | undefined; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Pick<Readonly, "scrollContainer"> & InexactPartial<...> & InexactPartial<...>'. Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Pick<Readonly, "scrollContainer"> & InexactPartial<...> & InexactPartial<...>'.ts(2322)

Essentially it seems if the ParallaxProvider element has either scrollContainer or scrollAxis properties set, then the component throws this error if you try to add any kind of child element. For example:

This throws the error

   return (
    <div className="scroll-container" ref={ref}>
      <ParallaxProvider
        scrollContainer={scrollEl}
        scrollAxis={props.scrollAxis}
      >{props.children}</ParallaxProvider>
    </div>
  );

But this does not

      <ParallaxProvider
        scrollContainer={scrollEl}
        scrollAxis={props.scrollAxis}
      ></ParallaxProvider>

and neither does this

    <div className="scroll-container" ref={ref}>
      <ParallaxProvider
      >{props.children}</ParallaxProvider>
    </div>

I might just be misunderstanding something simple but any help would be greatly appreciated again to help me achieve something similar to this: https://react-scroll-parallax-v3.surge.sh/?path=/docs/components-parallax-vertical-scroll--inside-a-div

Thank You!

[jscottsmith]

Looks like you didn't define props for the function:

const ScrollContainer = (props) => { // now you can do stuff with props }

If you need more help please link a codebase so I can see more details but I think this would fix the issue you're having.

[fyoudine]

same problem here since the error said it missed 'children' on ParallaxProvider props

const ScrollContainer = (props: { children: ReactNode }) => {
  const [scrollEl, setScrollElement] = React.useState<HTMLElement>()
  const ref = React.useRef<HTMLDivElement>(null)
  useEffect(() => {
    setScrollElement(document.body)
  }, [])

  return (
    <div className="your-scroll-container" ref={ref}>
      <ParallaxProvider scrollContainer={scrollEl}>
        {props.children}
      </ParallaxProvider>
    </div>
  )
}

it only append when scrollContainer is set

[geongeorge]

I have the same issue. it seems <ParallaxProvider> Doesn't like children if a scrollContainer is set @jscottsmith

 const modalRef = useRef<HTMLDivElement>(null)

 ...

 <ParallaxProvider scrollContainer={modalRef.current as HTMLElement}>
 <div> .. </div>
 </Parallaxprovider>

[jscottsmith]

@geongeorge thanks, published the type update in v3.4.1.