Switch to render prop function pattern

README.md

@@ -36,15 +36,19 @@ import ReactCursorPosition from 'react-cursor-position';
 ...
 
 <ReactCursorPosition>
-    <YourComponentOne/>
-    <YourComponentTwo/>
+    {(cursorProps) => (
+        <div>
+            <YourComponentOne {...cursorProps} />
+            <YourComponentTwo {...cursorProps} />
+        </div>
+    )}
 </ReactCursorPosition>
 ```
 
 react-cursor-position wraps its children in a div, which mouse and touch position
 are plotted relative to.
 
-Each child component will receive the following props:
+The function provided will receive the following object:
 
 ```JavaScript
 {
@@ -64,8 +68,6 @@ Each child component will receive the following props:
     }
 }
 ```
-This structure may be customized by implementing `mapChildProps` API feature.
-
 The information in `detectedEnvironment` is acquired from interaction with this component and will be unset until the first interaction.
 
 ## Props API
@@ -84,12 +86,6 @@ All props are optional.
 
 **isEnabled** : Boolean - Enable or disable cursor position monitoring without remounting. Defaults to true.
 
-**mapChildProps** : Function - Model child component props to your custom shape.
-Function receives one parameter with the signature
-`{ isActive: Boolean, isPositionOutside: Boolean, position: { x: Number, y: Number } }`.  
-It should return an object that is compatible with the props interface of your child components.
-See [example demo](https://ethanselzer.github.io/react-cursor-position/#/map-child-props).
-
 **onActivationChanged** : Function - Called when the component is active.
 Function receives one parameter with the signature `{ isActive: Boolean }`.
 
@@ -103,9 +99,6 @@ Function receives one parameter with the signature `{ isMouseDetected: Boolean,
 
 **pressMoveThreshold** : Number - Amount of movement, in pixels, allowed during press gesture detection. Defaults to 5.
 
-**shouldDecorateChildren** : Boolean - Suppress decoration of child components by
-setting this prop false. Defaults to true.
-
 **shouldStopTouchMovePropagation** : Boolean - Stop touchmove event bubbling when react-cursor-position is active. Defaults to false.
 
 **style** : Object - Style to be applied to the div rendered by react-cursor-position.

example/public/activation-click.html

@@ -21,8 +21,12 @@
     <ReactCursorPosition
         activationInteractionMouse={INTERACTIONS.CLICK}
     >
-        <PositionLabel />
-        <InstructionsLabel />
+        {(cursorProps) => (
+            <div>
+                <PositionLabel {...cursorProps} />
+                <InstructionsLabel />
+            </div>
+        )}
     </ReactCursorPosition>
 );
 </code>

example/public/activation-hover.html

@@ -23,8 +23,12 @@
         hoverDelayInMs={250} //default: 0
         hoverOffDelayInMs={150} //default: 0
     >
-        <PositionLabel />
-        <InstructionsLabel />
+        {(cursorProps) => (
+            <div>
+                <PositionLabel {...cursorProps} />
+                <InstructionsLabel />
+            </div>
+        )}
     </ReactCursorPosition>
 );
 </code>

example/public/activation-press.html

@@ -23,8 +23,12 @@
         pressDurationInMs={500} //default
         pressMoveThreshold={5} //default
     >
-        <PositionLabel />
-        <InstructionsLabel />
+        {(cursorProps) => (
+            <div>
+                <PositionLabel {...cursorProps} />
+                <InstructionsLabel />
+            </div>
+        )}
     </ReactCursorPosition>
 );
 </code>

example/public/activation-tap.html

@@ -21,8 +21,12 @@
     <ReactCursorPosition
         activationInteractionTouch={INTERACTIONS.TAP}
     >
-        <PositionLabel />
-        <InstructionsLabel />
+        {(cursorProps) => (
+            <div>
+                <PositionLabel {...cursorProps} />
+                <InstructionsLabel />
+            </div>
+        )}
     </ReactCursorPosition>
 );
 </code>

example/public/activation-touch.html

@@ -21,8 +21,12 @@
     <ReactCursorPosition
         activationInteractionTouch={INTERACTIONS.TOUCH}
     >
-        <PositionLabel />
-        <InstructionsLabel />
+        {(cursorProps) => (
+            <div>
+                <PositionLabel {...cursorProps} />
+                <InstructionsLabel />
+            </div>
+        )}
     </ReactCursorPosition>
 );
 </code>

example/public/class-name.html

@@ -19,8 +19,12 @@
 
 export default () => (
     <ReactCursorPosition className="example__target">
-        <PositionLabel />
-        <InstructionsLabel />
+        {(cursorProps) => (
+            <div>
+                <PositionLabel {...cursorProps} />
+                <InstructionsLabel />
+            </div>
+        )}
     </ReactCursorPosition>
 );
 </code>

example/public/on-activation-changed.html

@@ -34,7 +34,9 @@
                         this.setState({ isActive });
                     }
                 }}>
-                    <InstructionsLabel />
+                    {() => (
+                        <InstructionsLabel />
+                    )}
                 </ReactCursorPosition>
                 <ActivationChangedLabel {...this.state} />
             </div>

example/public/on-detected-environment-changed.html

@@ -32,7 +32,9 @@
                         this.setState({ detectedEnvironment });
                     }
                 }}>
-                    <InstructionsLabel />
+                    {() => (
+                        <InstructionsLabel />
+                    )}
                 </ReactCursorPosition>
                 <DetectedEnvironmentChangeLabel {...this.state} />
             </div>

example/public/on-position-changed.html

@@ -36,7 +36,9 @@
                     className: 'example__target',
                     onPositionChanged: props => this.setState(props)
                 }}>
-                    <InstructionsLabel />
+                    {() => (
+                        <InstructionsLabel />
+                    )}
                 </ReactCursorPosition>
                 <PositionChangedLabel {...this.state} />
             </div>

example/public/style.html

@@ -29,8 +29,12 @@
 
         return (
             <ReactCursorPosition {...{ style }}>
-                <PositionLabel />
-                <InstructionsLabel />
+                {(cursorProps) => (
+                    <div>
+                        <PositionLabel {...cursorProps} />
+                        <InstructionsLabel />
+                    </div>
+                )}
             </ReactCursorPosition>
         );
     }

example/src/components/ActivationByClick.js

@@ -7,10 +7,13 @@ export default () => (
         className="example__target"
         activationInteractionMouse={INTERACTIONS.CLICK}
     >
-        <PositionLabel />
-        <div className="example__instructions">
-            Click to activate. Hover. Then click again to deactivate.
-        </div>
+        {(cursorProps) => (
+            <div>
+                <PositionLabel {...cursorProps}/>
+                <div className="example__instructions">
+                    Click to activate. Hover. Then click again to deactivate.
+                </div>
+            </div>
+        )}
     </ReactCursorPosition>
 );
-

example/src/components/ActivationByHover.js

@@ -10,10 +10,14 @@ export default () => (
         hoverDelayInMs={250} //default 0
         hoverOffDelayInMs={150} //default 0
     >
-        <PositionLabel />
-        <div className="example__instructions">
-            <InstructionsLabel />
-        </div>
+        {(cursorProps) => (
+            <div>
+                <PositionLabel {...cursorProps} />
+                <div className="example__instructions">
+                    <InstructionsLabel />
+                </div>
+            </div>
+        )}
     </ReactCursorPosition>
 );
 

example/src/components/ActivationByPress.js

@@ -9,10 +9,14 @@ export default () => (
         pressDurationInMs={500} //default
         pressMoveThreshold={5} //default
     >
-        <PositionLabel />
-        <div className="example__instructions">
-            Press and hold to activate, then drag
-        </div>
+        {(cursorProps) => (
+            <div>
+                <PositionLabel {...cursorProps} />
+                <div className="example__instructions">
+                    Press and hold to activate, then drag
+                </div>
+            </div>
+        )}
     </ReactCursorPosition>
 );
 

example/src/components/ActivationByTap.js

@@ -7,10 +7,14 @@ export default () => (
         className="example__target"
         activationInteractionTouch={INTERACTIONS.TAP}
     >
-        <PositionLabel />
-        <div className="example__instructions">
-            Tap to activate. Drag. Tap again to deactivate.
-        </div>
+        {(cursorProps) => (
+            <div>
+                <PositionLabel {...cursorProps} />
+                <div className="example__instructions">
+                    Tap to activate. Drag. Tap again to deactivate.
+                </div>
+            </div>
+        )}
     </ReactCursorPosition>
 );
 

example/src/components/ActivationByTouch.js

@@ -7,10 +7,14 @@ export default () => (
         className="example__target"
         activationInteractionTouch={INTERACTIONS.TOUCH}
     >
-        <PositionLabel />
-        <div className="example__instructions">
-            Touch and Drag
-        </div>
+        {(cursorProps) => (
+            <div>
+                <PositionLabel {...cursorProps} />
+                <div className="example__instructions">
+                    Touch and Drag
+                </div>
+            </div>
+        )}
     </ReactCursorPosition>
 );