fix: add proper typings for PlainChildren rendering

Author: thebuilder

src/InView.tsx

@@ -1,13 +1,19 @@
 import * as React from 'react'
 import invariant from 'invariant'
 import { observe, unobserve } from './intersection'
-import { IntersectionObserverProps } from './typings/types'
+import { IntersectionObserverProps, PlainChildrenProps } from './typings/types'
 
 type State = {
   inView: boolean
   entry?: IntersectionObserverEntry
 }
 
+function isPlainChildren(
+  props: IntersectionObserverProps | PlainChildrenProps,
+): props is PlainChildrenProps {
+  return typeof props.children !== 'function'
+}
+
 /**
  * Monitors scroll, and triggers the children function with updated props
  *
@@ -17,7 +23,10 @@ type State = {
  )}
  </InView>
  */
-export class InView extends React.Component<IntersectionObserverProps, State> {
+export class InView extends React.Component<
+  IntersectionObserverProps | PlainChildrenProps,
+  State
+> {
   static displayName = 'InView'
   static defaultProps = {
     threshold: 0,
@@ -65,7 +74,7 @@ export class InView extends React.Component<IntersectionObserverProps, State> {
     }
   }
 
-  node: HTMLElement | null = null
+  node: Element | null = null
 
   observeNode() {
     if (!this.node) return
@@ -77,7 +86,7 @@ export class InView extends React.Component<IntersectionObserverProps, State> {
     })
   }
 
-  handleNode = (node?: HTMLElement) => {
+  handleNode = (node?: Element | null) => {
     if (this.node) unobserve(this.node)
     this.node = node ? node : null
     this.observeNode()
@@ -91,6 +100,11 @@ export class InView extends React.Component<IntersectionObserverProps, State> {
   }
 
   render() {
+    const { inView, entry } = this.state
+    if (!isPlainChildren(this.props)) {
+      return this.props.children({ inView, entry, ref: this.handleNode })
+    }
+
     const {
       children,
       as,
@@ -102,13 +116,6 @@ export class InView extends React.Component<IntersectionObserverProps, State> {
       ...props
     } = this.props
 
-    const { inView, entry } = this.state
-
-    if (typeof children === 'function') {
-      // @ts-ignore doesn't properly detect the function here...
-      return children({ inView, entry, ref: this.handleNode })
-    }
-
     return React.createElement(
       as || tag || 'div',
       { ref: this.handleNode, ...props },

src/typings/types.ts

@@ -17,23 +17,33 @@ export type IntersectionObserverProps = IntersectionOptions & {
    * contain an `inView` boolean and `ref` that should be
    * assigned to the element root.
    */
-  children?: React.ReactNode | ((fields: RenderProps) => React.ReactNode)
+  children: (fields: RenderProps) => React.ReactNode
+
+  /** Call this function whenever the in view state changes */
+  onChange?: (inView: boolean, entry: IntersectionObserverEntry) => void
+}
+
+/**
+ * Types specific to the PlainChildren rendering of InView
+ * */
+export type PlainChildrenProps = IntersectionOptions & {
+  children: React.ReactNode
 
   /**
    * Render the wrapping element as this element.
    * @default `'div'`
    */
-  as?: string
+  as?: React.ReactType<any>
 
   /**
    * Element tag to use for the wrapping component
    * @deprecated Replace with the 'as' prop
    */
-  tag?: string
+  tag?: React.ReactType<any>
 
   /** Call this function whenever the in view state changes */
   onChange?: (inView: boolean, entry: IntersectionObserverEntry) => void
-}
+} & React.HTMLProps<HTMLDivElement>
 
 export type HookResponse = [
   ((node?: Element | null) => void),

stories/Hooks.story.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react'
 import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
-import { useInView, IntersectionOptions } from '../src/index'
+import { useInView } from '../src/index'
 import ScrollWrapper from './ScrollWrapper/index'
 import { CSSProperties } from 'react'
+import { IntersectionOptions } from '../src/typings/types'
 
 type Props = {
   style?: Object

stories/InView.story.tsx

@@ -50,7 +50,11 @@ storiesOf('Intersection Observer', module)
   ))
   .add('Plain children', () => (
     <ScrollWrapper>
-      <InView onChange={action('Child Observer inview')}>
+      <InView
+        onChange={action('Child Observer inview')}
+        className="custom-class"
+        as="div"
+      >
         <Header>Plain children</Header>
       </InView>
     </ScrollWrapper>