thebuilder/react-intersection-observer v8.0.0

Rewritten Hooks and tests

on GitHub

So now that Hooks have been out in the wild for a week, a few issues are starting to pop up.
Especially relating to how refs are handled (#162). To fix this, the current API needs to be changed.

New useInView API:

const [ref, inView, entry] = useInView(options)

If you are already using the hook, then you will need to update your code, by changing:

const Component = () => {
  const ref = useRef()
  const inView = useInView(ref, {
    threshold: 0,
  })

  return (
    <div ref={ref}>
      ...
    </div>
  )
}

Into:

const Component = () => {
  const [ref, inView] = useInView({
    threshold: 0,
  })

  return (
    <div ref={ref}>
      ...
    </div>
  )
}

Removed

• The useIntersectionObserver hook was removed in favor of the useInView hook.

Tests

Tests have been rewritten using react-testing-library. Before they were messing with the internals of the components to fake updates. It also just works with the new hooks.