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

Hooks!

This release enables support for the useInView(ref, options) hook. The library will work fine with older versions of React, as long as you don't use the execute the hook.

import { useRef } from 'react'
import { useInView } from 'react-intersection-observer'

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

  return (
    <div ref={ref}>
      <h2>{`Header inside viewport ${inView}.`}</h2>
    </div>
  )
}

The release also refactors the Rollup build, which should result in a more optimized bundle.

Throw error if trying to observe element twice

This is a fix for #119

Babel 7

This release updates Babel and Rollup, and publishes the new output files.

Keep plain children

Due to popular demand (#91), I'll keep support for rendering plain children inside the <Observer />.

This release just removes the deprecation flag. You don't need to change anything.