Restructure package contents

This release restructures how the project is published to npm. Instead of publishing the entire project, it just publishes the content of the dist directory.
This is only a breaking change, if you were importing files from the src or dist directory before.

If you do run into an issue with imports, it should be fixed by importing directly from react-intersection-observer.

TypeScript Tweaks

This release tweaks the Typescript typings for the PlainChildren version, so it should be more generic.

v8.22.3

• refactor: change the Map loop to forEach (#200) 831ca3a

v8.22.2...v8.22.3

v8.22.2

Hooks were broken in last release - they would never trigger when they left the viewport. 😳

v8.22.1...v8.22.2

Output test-utils.js to CommonJS

This fixes #197 and allows you to actually import the file into Jest.

Rework some internals

Potential breaking change #195

Change for the <InView>

Previously, the initial callback would trigger a state update, even if the element was still outside the viewport.
This update changes the behavior, so it won't trigger new state update before the element enters the viewport.

If you used the IntersectionObserverEntry during that first callback, it will no longer work. The use case for this, is most likely to determine if the element started outside the viewport.

Workaround

As a workaround, you can use the onChange callback, since this will still be called everytime.

Testing utils

This releases is focused on helping you when writing tests.

In order to write meaningful tests, the IntersectionObserver needs to be
mocked. If you are writing your tests in Jest, you can use the included
test-utils.js. It mocks the IntersectionObserver, and includes a few methods
to assist with faking the inView state.

test-utils.js

Import the methods from react-intersection-observer/test-utils.

mockAllIsIntersecting(isIntersecting:boolean)
Set the isIntersecting on all current IntersectionObserver instances.

mockIsIntersecting(element:Element, isIntersecting:boolean)
Set the isIntersecting for the IntersectionObserver of a specific element.

intersectionMockInstance(element:Element): IntersectionObserver
Call the intersectionMockInstance method with an element, to get the (mocked)
IntersectionObserver instance. You can use this to spy on the observe and
unobserve methods.

Test Example

import React from 'react'
import { render } from 'react-testing-library'
import { useInView } from 'react-intersection-observer'
import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils'

const HookComponent = ({ options }) => {
  const [ref, inView] = useInView(options)
  return <div ref={ref}>{inView.toString()}</div>
}

test('should create a hook inView', () => {
  const { getByText } = render(<HookComponent />)
  mockAllIsIntersecting(true)
  getByText('true')
})

Rewritten Hooks and tests

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.

TypeScript edition! 🎉

I decided to switch the project from Flow to TypeScript. This should ensure the TypeScript definitions match the actual implementation, without the need to manually sync the index.d.tsfile.

In the process, i've rewritten some of the internals, but it shouldn't affect the actual API.

A documentation site has also been created using docz: https://react-intersection-observer.now.sh

Breaking changes

• The deprecated render method has been removed - Make sure you use children instead.
• Instead of returning just intersectionRatio, you now get entry that contains the entire IntersectionObserverEntry element. If you're relying on intersectionRatio, you should change your code to entry.intersectionRatio.
• rootId has been removed - An idea for each unique root is now auto generated. This always felt like temporary solution, until i implemented a smarter way.
• Flow types have been removed.

Intersection Ratio

This release exposes the intersectionRatio, giving you a bit more insight into what triggered an update.

import { InView } from 'react-intersection-observer'

const Component = () => (
  <InView>
    {({ inView, ref, intersectionRatio }) => (
      <div ref={ref}>
        <h2>{`Header inside viewport ${inView} at ${intersectionRatio}`}</h2>
      </div>
    )}
  </InView>
)

export default Component

See #123