Rewrite using functional components and hooks

[maerzhase]

Hi there it's me again! 😸 I had some time to look into scrollama and react-scrollama. With the problems we previously found in e.g. #40 I started to be curious about a modern functional components and hooks approach for react-scrollama . After I did a short deep dive into both libs and the use of react-intersection-observer-hook lib, it was actually pretty easy to implement a working version.

The benefits I see in the rewrite is mainly in code maintenance (less code) and smaller bundle size. My build works as a drop-in replacement of the example and is only ~8kb instead of ~26kb.

Since i am not sure if you are at all interested in such a rewrite I wanted to open this issue before I open a PR. Just let me know if you want to integrate this as a release of this library. You can have a look at the code here: https://github.com/maerzhase/react-scrollama/tree/feature/functional-rewrite

Since there are no tests written i am not 100% sure if I might have missed something. I tried my best to keep up with the existing API and from running the example I actually do not experience any problems.

[maerzhase]

🙈 Created another branch of the rewrite that enables offset defined in pixel values: https://github.com/maerzhase/react-scrollama/tree/feature/allow-pixel-offset

EDIT: btw, the functional rewrite that uses relative offset doesn't need a window resize listener because the IntersectionObserver uses relative rootMargin itself. For the the absolute pixel offset we would need to re-incorporate the window resize listener.

[cedricdelpoux]

It's interesting ! Open a PR and we will see

[maerzhase]

54 is open.