jsonkao / react-scrollama

Simple scrollytelling with the IntersectionObserver in React.
https://jsonkao.github.io/react-scrollama
MIT License
390 stars 30 forks source link

Quick-fix library could not initialise in componentDidMount #47

Closed maerzhase closed 4 years ago

maerzhase commented 4 years ago

I am creating this PR as draft because i believe there is a cleaner solution to the problem. I didn't have the time yet to dive deeper, but maybe its also clear to @jsonkao how to introduce the proper fix?!

Anyway this PR describes the problem and introduces a quick-fix to enable this desired initialisation on componentDidMount.

Short description

Previously this library introduced a fix for #40 by initialising the lib upon document.load. As we found out this is not sufficient for any situation you want to use the lib past the document.load. To introduce a better usability we have to init in componentDidMount. @jsonkao stated that he experienced problems with this pattern. And I also could experience some problems with doing so. The problem is that somehow the component state (of each steps) is undefined when updateStepBelowIO and updateStepAboveIO are called—although we are calling updateOffsetHeight before we initialise. I am not sure why this is the case but I believe it has to do with how the refs are resolved... @jsonkao maybe you have a clue.

The quick fix returns the current offsetHeight when updateOffsetHeight is called. And we call updateOffsetHeight before we init the IntersectionObserver's.

goleary commented 4 years ago

I haven't tested this in traditional react but this works for me in Gatsby.

aleciavogel commented 4 years ago

I tried this out in traditional react and it worked for me!

goleary commented 4 years ago

I may have spoken too soon, I get a window reference error when I try to build (gatsby build).

maerzhase commented 4 years ago

I may have spoken too soon, I get a window reference error when I try to build (gatsby build).

This has nothing to do with the actual issue. See my answer in #40