[TypeScript] I don't really understand how I implement this.

[JohnyTheCarrot]

Trouble With Implementation

Hi everyone, I'm so sorry if I missed something obvious, but I can't seem to figure out how to implement this library, and it's just been an overall headache to figure out. I've spent quite a while looking at the docs and example code but can't seem to get a working version. Help would be greatly appreciated! Again, sorry if I had missed something somewhere.

image

type ParallaxHomePageProps = {
  parallaxController: {
    update: () => void;
    destroy: () => void;
  };
};

type ParallaxHomePageState = {};

export class ParallaxHomePage extends React.Component<
  ParallaxHomePageProps,
  ParallaxHomePageState
> {
  constructor(props: ParallaxHomePageProps) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <ParallaxProvider>
        <div style={{ height: "100%", overflow: "auto", display: "flex" }}>
          <div style={{ position: "relative" }} className="full-width"> // full-width = fill remaining width
            <Parallax className="custom-class" x={[-20, 20]}>
              <h1>AAAAAAAAAAAAAAA</h1>
            </Parallax>
            <Parallax className="custom-class" x={[-20, 20]}>
              <h1>AAAAAAAAAAAAAAA</h1>
            </Parallax>
            <Parallax className="custom-class" x={[-20, 20]}>
              <h1>AAAAAAAAAAAAAAA</h1>
            </Parallax>
          </div>
        </div>
      </ParallaxProvider>
    );
  }
}

[jscottsmith]

<div style={{ height: "100%", overflow: "auto", display: "flex" }}>

Guessing by these style that this element is the scrolling container.

By default a normal setup requires that the body element scroll. If you want a different element to be the the scroll container you need to set it in the ParallaxProvider. See scrollContainer prop.

[JohnyTheCarrot]

I'm sorry but how do I get the element of a component?

[JohnyTheCarrot]

Figured it out, thanks!

[power-f-GOD]

@jscottsmith Documentation for this project is really poor. Can you update it to be more explicit with more straightforward and explanatory examples. Thank you.

[AurelienDud]

Maybe can i try to explain more accurately what could cause some issues.

There is a documentation. This is already good and so this is not poor. But maybe a few more information could be provided. By example what mean the two values in x and y Parallax element properties. By reasoning i guessed what that means and by looking into the issues of the project i got confirmation. A simple addition in the documentation might help users.

The two exemples are beautiful but maybe not the better to explain the project. Many people will want an accurate positioning of their elements. Is your project suitable for that? It's difficult to know that by looking at the example because both show an "artistic" design where the "good" positioning is subjective. Maybe an example with a cover picture could be useful because parallax effect is often used to that usage on blogging websites.

See the code in a sandbox is also something really useful to understand how works a library. Very more useful than a webpage where it's difficult to understand the context.

Hope my comment could help

[jscottsmith]

@AurelienDud thanks for the thoughtful feedback -- I think you're right that the main x and y API can be explained a bit better. It felt easily inferred to me how the props work but that's probably because I built it to work that way. 😆

As for the demos, I find the storybook to be the best "example" and I've added a story for nearly every possible use of this library I can think of. It's not as good as a Code Sandbox I suppose but the source code is still there for anyone to look at. The demo sites are just pretty things whereas the storybook should show a pattern to follow in almost all situations.

Anyway it's helpful, I'll think about how the docs may be updated to better introduce the API.