useScroll not updating x,y

[lucasbara]

What is the current behavior?

Steps to reproduce it and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have extra dependencies other than react-use. Paste the link to your JSFiddle or CodeSandbox example below:

https://codesandbox.io/s/react-use-issue-ry7zk

What is the expected behavior?

useScroll should update with the current position

A little about versions:

• OS: Windows 10
• Browser (vendor and version): Chrome 103
• React: 17.0.2
• react-use: 17.3.1
• _Did this worked in the previous package version? idk

[CHU295]

+1

[SuperZ3]

i think you can't use it like this:

const ref = useRef(null)
return (
    active && <div ref={ref}></div>
)

first time when react render, active is false and ref.current is null,then you put ref in useScroll,which make hook get null

i think it's better to make active control style: {display: active ? 'block' : 'none''} attribute

[childrentime]

React doesn't listen for ref updates, so I think this is an anti-pattern.

[Mholy]

I got it working in this way:

  const [scrollEl, setScrollEl] = useState<HTMLDivElement>(null);
  const { x, y } = useScroll({ current: scrollEl });

  return (
    <>
      {active && <div ref={setScrollEl}></div>}
    </>
  )