Keep plain children support (#91)

* feat: add back plain children support

* feat: add example to story

* fix: add correct types

* test: improve tests

Author: thebuilder

README.md

@@ -30,7 +30,7 @@ or NPM:
 npm install react-intersection-observer --save
 ```
 
-> ⚠️You also want to add the [intersection-observer](https://www.npmjs.com/package/react-intersection-observer) polyfill for full browser support. Check out adding the [polyfill](#polyfill) for details about how you can include it.
+> ⚠️ You also want to add the [intersection-observer](https://www.npmjs.com/package/react-intersection-observer) polyfill for full browser support. Check out adding the [polyfill](#polyfill) for details about how you can include it.
 
 ## Usage
 
@@ -40,7 +40,7 @@ To use the `Observer`, you pass it a function. It will be called whenever the st
 In addition to the `inView` prop, children also receives a `ref` that should be set on the containing DOM element.
 This is the element that the IntersectionObserver will monitor.
 
-```js
+```jsx
 import Observer from 'react-intersection-observer'
 
 const Component = () => (
@@ -56,19 +56,40 @@ const Component = () => (
 export default Component
 ```
 
+### Plain children
+
+You can pass any element to the `<Observer />`, and it will handle creating the wrapping DOM element.
+Add a handler to the `onChange` method, and control the state in your own component.
+It will pass any extra props to the HTML element, allowing you set the `className`, `style`, etc.
+
+```jsx
+import Observer from 'react-intersection-observer'
+
+const Component = () => (
+  <Observer tag="div" onChange={inView => console.log('Inview:', inView)}>
+    <h2>Plain children are always rendered. Use onChange to monitor state.</h2>
+  </Observer>
+)
+
+export default Component
+```
+
+> ⚠️ When rendering a plain child, make sure you keep your HTML output semantic.
+> Change the `tag` to match the context, and add a `className` to style the `<Observer />`.
+
 ## Props
 
 The **`<Observer />`** accepts the following props:
 
-| Name            | Type                    | Default | Required | Description                                                                                                                                                                                                                      |
-| --------------- | ----------------------- | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **children**    | ({inView, ref}) => Node |         | true     | Children expects a function that recieves an object contain an `inView` boolean and `ref` that should be assigned to the element root.                                                                                           |
-| **onChange**    | (inView) => void        |         | false    | Call this function whenever the in view state changes                                                                                                                                                                            |
-| **root**        | HTMLElement             |         | false    | The HTMLElement that is used as the viewport for checking visibility of the target. Defaults to the browser viewport if not specified or if null.                                                                                |
-| **rootId**      | String                  |         | false    | Unique identifier for the root element - This is used to identify the IntersectionObserver instance, so it can be reused. If you defined a root element, without adding an id, it will create a new instance for all components. |
-| **rootMargin**  | String                  | '0px'   | false    | Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left).                                                                                               |
-| **threshold**   | Number                  | 0       | false    | Number between 0 and 1 indicating the the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points.                                                               |
-| **triggerOnce** | Bool                    | false   | false    | Only trigger this method once                                                                                                                                                                                                    |
+| Name            | Type                                       | Default | Required | Description                                                                                                                                                                                                                       |
+| --------------- | ------------------------------------------ | ------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **children**    | ({inView, ref}) => React.Node / React.Node |         | true     | Children expects a function that receives an object contain an `inView` boolean and `ref` that should be assigned to the element root. Alternately pass a plain child, to have the `<Observer />` deal with the wrapping element. |
+| **onChange**    | (inView) => void                           |         | false    | Call this function whenever the in view state changes                                                                                                                                                                             |
+| **root**        | HTMLElement                                |         | false    | The HTMLElement that is used as the viewport for checking visibility of the target. Defaults to the browser viewport if not specified or if null.                                                                                 |
+| **rootId**      | String                                     |         | false    | Unique identifier for the root element - This is used to identify the IntersectionObserver instance, so it can be reused. If you defined a root element, without adding an id, it will create a new instance for all components.  |
+| **rootMargin**  | String                                     | '0px'   | false    | Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left).                                                                                                |
+| **threshold**   | Number                                     | 0       | false    | Number between 0 and 1 indicating the the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points.                                                                |
+| **triggerOnce** | Bool                                       | false   | false    | Only trigger this method once                                                                                                                                                                                                     |
 
 ## Usage in other projects
 

index.d.ts

@@ -7,7 +7,7 @@ export interface RenderProps {
 
 export interface IntersectionObserverProps {
   /** Children expects a function that recieves an object contain an `inView` boolean and `ref` that should be assigned to the element root. */
-  children?: (fields: RenderProps) => React.ReactNode
+  children?: React.ReactNode | ((fields: RenderProps) => React.ReactNode)
 
   /**
    * The `HTMLElement` that is used as the viewport for checking visibility of
@@ -31,6 +31,12 @@ export interface IntersectionObserverProps {
    */
   rootMargin?: string
 
+  /**
+   * Element tag to use for the wrapping component
+   * @default `'div'`
+   */
+  tag?: string
+
   /** Number between 0 and 1 indicating the the percentage that should be
    * visible before triggering. Can also be an array of numbers, to create
    * multiple trigger points.

src/index.js

@@ -4,17 +4,19 @@ import { observe, unobserve } from './intersection'
 import invariant from 'invariant'
 
 type Props = {
-  /** Children expects a function that recieves an object contain an `inView` boolean and `ref` that should be assigned to the element root. */
-  children?: ({
-    inView: boolean,
-    ref: (node: ?HTMLElement) => void,
-  }) => React.Node,
+  /** Children expects a function that receives an object contain an `inView` boolean and `ref` that should be assigned to the element root. */
+  children?:
+    | (({
+        inView: boolean,
+        ref: (node: ?HTMLElement) => void,
+      }) => React.Node)
+    | React.Node,
   /** @deprecated replace render with children */
   render?: ({
     inView: boolean,
     ref: (node: ?HTMLElement) => void,
   }) => React.Node,
-  /** @deprecated */
+  /** Element tag to use for the wrapping element when rendering a plain React.Node. Defaults to 'div'  */
   tag?: string,
   /** Number between 0 and 1 indicating the the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points. */
   threshold?: number | Array<number>,
@@ -61,11 +63,6 @@ class Observer extends React.Component<Props, State> {
           `react-intersection-observer: "render" is deprecated, and should be replaced with "children"`,
           this.node,
         )
-      } else if (typeof this.props.children !== 'function') {
-        console.warn(
-          `react-intersection-observer: plain "children" is deprecated. You should convert it to a function that handles the "ref" manually.`,
-          this.node,
-        )
       }
       invariant(
         this.node,

src/intersection.js

@@ -78,7 +78,6 @@ export function unobserve(element: ?HTMLElement) {
       : observer
 
     if (observerInstance) {
-      // $FlowFixMe - the interface in bom.js is wrong. Spec should accept the element.
       observerInstance.unobserve(element)
     }
 
@@ -147,9 +146,7 @@ function onChange(changes) {
       }
 
       instance.visible = inView
-      if (instance.callback) {
-        instance.callback(inView)
-      }
+      instance.callback(inView)
     }
   })
 }

stories/Observer.story.js

@@ -41,16 +41,11 @@ storiesOf('Intersection Observer', module)
       </Observer>
     </ScrollWrapper>
   ))
-  .add('Render prop', () => (
+  .add('Plain children', () => (
     <ScrollWrapper>
-      <Observer
-        onChange={action('Render Observer inview')}
-        render={({ inView, ref }) => (
-          <Header ref={ref}>
-            Header is inside viewport: {inView.toString()}
-          </Header>
-        )}
-      />
+      <Observer onChange={action('Child Observer inview')}>
+        <Header>Plain children</Header>
+      </Observer>
     </ScrollWrapper>
   ))
   .add('Taller then viewport', () => (

tests/Observer.test.js

@@ -19,6 +19,19 @@ it('Should render <Observer />', () => {
   )
 })
 
+it('should render plain children', () => {
+  const wrapper = mount(<Observer>inner</Observer>)
+  expect(wrapper).toMatchSnapshot()
+})
+it('should render with tag', () => {
+  const wrapper = mount(<Observer tag="span">inner</Observer>)
+  expect(wrapper).toMatchSnapshot()
+})
+it('should render with className', () => {
+  const wrapper = mount(<Observer className="inner-class">inner</Observer>)
+  expect(wrapper).toMatchSnapshot()
+})
+
 it('Should render <Observer /> inview', () => {
   const callback = jest.fn(plainChild)
   const wrapper = mount(<Observer>{callback}</Observer>)
@@ -166,13 +179,6 @@ describe('deprecated methods', () => {
   afterEach(() => {
     global.console.warn.mockReset()
   })
-  it('should render plain children', () => {
-    mount(<Observer>inner</Observer>)
-    expect(global.console.warn).toHaveBeenCalledWith(
-      'react-intersection-observer: plain "children" is deprecated. You should convert it to a function that handles the "ref" manually.',
-      expect.any(Object),
-    )
-  })
   it('should render using "render"', () => {
     mount(<Observer render={plainChild} />)
     expect(global.console.warn).toHaveBeenCalledWith(

tests/__snapshots__/Observer.test.js.snap

@@ -23,3 +23,40 @@ exports[`Should render <Observer /> render when in view 1`] = `
   </div>
 </Observer>
 `;
+
+exports[`should render plain children 1`] = `
+<Observer
+  threshold={0}
+  triggerOnce={false}
+>
+  <div>
+    inner
+  </div>
+</Observer>
+`;
+
+exports[`should render with className 1`] = `
+<Observer
+  className="inner-class"
+  threshold={0}
+  triggerOnce={false}
+>
+  <div
+    className="inner-class"
+  >
+    inner
+  </div>
+</Observer>
+`;
+
+exports[`should render with tag 1`] = `
+<Observer
+  tag="span"
+  threshold={0}
+  triggerOnce={false}
+>
+  <span>
+    inner
+  </span>
+</Observer>
+`;

tests/intersection.test.js

@@ -91,6 +91,10 @@ it('should unobserve', () => {
   unobserve(el)
 })
 
+it('should only unobserve if it gets an element', () => {
+  unobserve()
+})
+
 it('should keep observer when unobserve with multiple elements', () => {
   observe(el, jest.fn())
   observe({ el: 'htmlElement2' }, jest.fn())