fisshy / react-scroll

React scroll component
https://github.com/fisshy/react-scroll/blob/master/README.md
MIT License
4.36k stars 437 forks source link

Add useAnimateScroll hook #435

Open LauraBeatris opened 4 years ago

LauraBeatris commented 4 years ago

As discussed i issue https://github.com/fisshy/react-scroll/issues/430, the animateScroll module isn't working when it's called in a useEffect hook on the component mount.

It's a better approach to create a hook to fix that problem instead of relying on the need of creating a ref to verify if the tree has loaded, and then execute the effect with the animateScroll method.

The hook will return a ref that will be used as the scroll container, and behind the scenes it will take care of calling it inside of a useEffect call

useEffect(() => {
    if (containerRef && containerRef.current) {
      method({
        container: containerRef.current,
        ...options,
      });
    }
  }, [
    containerRef,
    method,
    options,
  ]);

We must discuss some points here, this library uses the version ^16.0.0 of React, and hooks only are supported from version 16.8 onwards.

I upgraded React to 16.13.1, but we have to think if it's going to lead to some kind of breaking changes in other projects.

Also, I added a babel plugin to support spread operator.

fisshy commented 4 years ago

Great! Will look into it, otherwise we will release it as 1.8 with breaking changes, it's time to upgrade it anyway.

alexrabin commented 1 year ago

@fisshy why hasn't this been merged yet? Been over a year and a half

fisshy commented 1 year ago

@fisshy why hasn't this been merged yet? Been over a year and a half

I think I began working on a hook-first approach but ended up not doing it, and now its been forgotten until you woke it up.