Expose intersectionRatio value to callback and render fns (#152)

* Expose intersectionRatio value to callback and render fns

* refactor: add intersectionRatio to index.d.ts

Author: thebuilder

index.d.ts

@@ -2,6 +2,7 @@ import React = require('react')
 
 export interface RenderProps {
   inView: boolean
+  intersectionRatio: number
   ref: React.RefObject<any>
 }
 
@@ -57,7 +58,7 @@ export interface IntersectionObserverProps extends IntersectionOptions {
   tag?: string
 
   /** Call this function whenever the in view state changes */
-  onChange?: (inView: boolean) => void
+  onChange?: (inView: boolean, intersectionRatio: number) => void
 }
 
 export class InView extends React.Component<IntersectionObserverProps, {}> {}

src/__tests__/Observer.test.js

@@ -138,10 +138,10 @@ it('Should recreate observer when rootMargin change', () => {
 it('Should trigger onChange callback', () => {
   const onChange = jest.fn()
   const wrapper = mount(<Observer onChange={onChange}>{plainChild}</Observer>)
-  wrapper.instance().handleChange(true)
-  expect(onChange).toHaveBeenLastCalledWith(true)
-  wrapper.instance().handleChange(false)
-  expect(onChange).toHaveBeenLastCalledWith(false)
+  wrapper.instance().handleChange(true, 1)
+  expect(onChange).toHaveBeenLastCalledWith(true, 1)
+  wrapper.instance().handleChange(false, 0)
+  expect(onChange).toHaveBeenLastCalledWith(false, 0)
 })
 
 it('Should unobserve when triggerOnce comes into view', () => {

src/__tests__/intersection.test.js

@@ -121,7 +121,7 @@ it('should trigger onChange with ratio 0', () => {
     },
   ])
 
-  expect(cb).toHaveBeenCalledWith(true)
+  expect(cb).toHaveBeenCalledWith(true, 0)
   expect(instance.visible).toBe(true)
 })
 
@@ -139,7 +139,7 @@ it('should trigger onChange with multiple thresholds ', () => {
     },
   ])
 
-  expect(cb).toHaveBeenCalledWith(true)
+  expect(cb).toHaveBeenCalledWith(true, 0)
   expect(instance.visible).toBe(true)
 })
 
@@ -158,11 +158,11 @@ it('should trigger onChange with isIntersection', () => {
     },
   ])
 
-  expect(cb).toHaveBeenCalledWith(true)
+  expect(cb).toHaveBeenCalledWith(true, 0)
   expect(instance.visible).toBe(true)
 })
 
-it('should not ensure threshold is 0 if undefined', () => {
+it('should ensure threshold is 0 if undefined', () => {
   const cb = jest.fn()
   const instance = observe(el, cb, { threshold: undefined })
   const calls = global.IntersectionObserver.mock.calls
@@ -176,7 +176,7 @@ it('should not ensure threshold is 0 if undefined', () => {
     },
   ])
 
-  expect(cb).toHaveBeenCalledWith(true)
+  expect(cb).toHaveBeenCalledWith(true, 0)
   expect(instance.visible).toBe(true)
 })
 
@@ -195,7 +195,7 @@ it('should trigger onChange with isIntersection false', () => {
     },
   ])
 
-  expect(cb).toHaveBeenCalledWith(false)
+  expect(cb).toHaveBeenCalledWith(false, 0)
   expect(instance.visible).toBe(false)
 })
 

src/index.js

@@ -23,22 +23,25 @@ type Props = IntersectionOptions & {
   children?:
     | (({
         inView: boolean,
+        intersectionRatio?: number,
         ref: (node: ?HTMLElement) => void,
       }) => React.Node)
     | React.Node,
   /** @deprecated replace render with children */
   render?: ({
     inView: boolean,
+    intersectionRatio?: number,
     ref: (node: ?HTMLElement) => void,
   }) => React.Node,
   /** Element tag to use for the wrapping element when rendering a plain React.Node. Defaults to 'div'  */
   tag?: string,
   /** Call this function whenever the in view state changes */
-  onChange?: (inView: boolean) => void,
+  onChange?: (inView: boolean, intersectionRatio: number) => void,
 }
 
 type State = {
   inView: boolean,
+  intersectionRatio: number,
 }
 
 /**
@@ -58,6 +61,7 @@ export class InView extends React.Component<Props, State> {
 
   state = {
     inView: false,
+    intersectionRatio: 0,
   }
 
   componentDidMount() {
@@ -124,10 +128,10 @@ export class InView extends React.Component<Props, State> {
     this.observeNode()
   }
 
-  handleChange = (inView: boolean) => {
-    this.setState({ inView })
+  handleChange = (inView: boolean, intersectionRatio: number) => {
+    this.setState({ inView, intersectionRatio })
     if (this.props.onChange) {
-      this.props.onChange(inView)
+      this.props.onChange(inView, intersectionRatio)
     }
   }
 
@@ -144,11 +148,11 @@ export class InView extends React.Component<Props, State> {
       ...props
     } = this.props
 
-    const { inView } = this.state
+    const { inView, intersectionRatio } = this.state
     const renderMethod = children || render
 
     if (typeof renderMethod === 'function') {
-      return renderMethod({ inView, ref: this.handleNode })
+      return renderMethod({ inView, intersectionRatio, ref: this.handleNode })
     }
 
     return React.createElement(

src/intersection.js

@@ -1,7 +1,7 @@
 // @flow
 import invariant from 'invariant'
 
-type Callback = (inView: boolean) => void
+type Callback = (inView: boolean, intersectionRatio: number) => void
 
 type Instance = {
   callback: Callback,
@@ -155,7 +155,7 @@ function onChange(changes) {
       }
 
       instance.visible = inView
-      instance.callback(inView)
+      instance.callback(inView, intersectionRatio)
     }
   })
 }