diff --git a/README.md b/README.md index 02c8f9d9..5e99e258 100644 --- a/README.md +++ b/README.md @@ -36,15 +36,19 @@ import ReactCursorPosition from 'react-cursor-position'; ... - - + {(cursorProps) => ( +
+ + +
+ )} ``` 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. diff --git a/example/public/activation-click.html b/example/public/activation-click.html index 5761fb19..0d64a772 100644 --- a/example/public/activation-click.html +++ b/example/public/activation-click.html @@ -21,8 +21,12 @@ <ReactCursorPosition activationInteractionMouse={INTERACTIONS.CLICK} > - <PositionLabel /> - <InstructionsLabel /> + {(cursorProps) => ( + <div> + <PositionLabel {...cursorProps} /> + <InstructionsLabel /> + </div> + )} </ReactCursorPosition> ); diff --git a/example/public/activation-hover.html b/example/public/activation-hover.html index e8d38757..e24d7216 100644 --- a/example/public/activation-hover.html +++ b/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> ); diff --git a/example/public/activation-press.html b/example/public/activation-press.html index 6eb30525..4cc9216b 100644 --- a/example/public/activation-press.html +++ b/example/public/activation-press.html @@ -23,8 +23,12 @@ pressDurationInMs={500} //default pressMoveThreshold={5} //default > - <PositionLabel /> - <InstructionsLabel /> + {(cursorProps) => ( + <div> + <PositionLabel {...cursorProps} /> + <InstructionsLabel /> + </div> + )} </ReactCursorPosition> ); diff --git a/example/public/activation-tap.html b/example/public/activation-tap.html index ea3d46ad..569663f2 100644 --- a/example/public/activation-tap.html +++ b/example/public/activation-tap.html @@ -21,8 +21,12 @@ <ReactCursorPosition activationInteractionTouch={INTERACTIONS.TAP} > - <PositionLabel /> - <InstructionsLabel /> + {(cursorProps) => ( + <div> + <PositionLabel {...cursorProps} /> + <InstructionsLabel /> + </div> + )} </ReactCursorPosition> ); diff --git a/example/public/activation-touch.html b/example/public/activation-touch.html index 06a4d081..825804c6 100644 --- a/example/public/activation-touch.html +++ b/example/public/activation-touch.html @@ -21,8 +21,12 @@ <ReactCursorPosition activationInteractionTouch={INTERACTIONS.TOUCH} > - <PositionLabel /> - <InstructionsLabel /> + {(cursorProps) => ( + <div> + <PositionLabel {...cursorProps} /> + <InstructionsLabel /> + </div> + )} </ReactCursorPosition> ); diff --git a/example/public/class-name.html b/example/public/class-name.html index 69e1152d..3b2b8111 100644 --- a/example/public/class-name.html +++ b/example/public/class-name.html @@ -19,8 +19,12 @@ export default () => ( <ReactCursorPosition className="example__target"> - <PositionLabel /> - <InstructionsLabel /> + {(cursorProps) => ( + <div> + <PositionLabel {...cursorProps} /> + <InstructionsLabel /> + </div> + )} </ReactCursorPosition> ); diff --git a/example/public/map-child-props.html b/example/public/map-child-props.html deleted file mode 100644 index 058f0e5f..00000000 --- a/example/public/map-child-props.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - - Map Child Props | Code Example | React Cursor Position - - -
-
-import React from 'react';
-import ReactCursorPosition from 'react-cursor-position';
-
-import PointPositionLabel from './PointPositionLabel';
-import InstructionsLabel from './InstructionsLabel';
-
-export default () => (
-    <ReactCursorPosition
-        className="example__target"
-        mapChildProps={({ elementDimensions, isActive, isPositionOutside, position }) => {
-            return {
-                elementDimensions,
-                isActive,
-                isOutside: isPositionOutside,
-                point: position
-            };
-        }}
-    >
-        <PointPositionLabel />
-        <InstructionsLabel />
-    </ReactCursorPosition>
-);
-
-
- - - - - diff --git a/example/public/on-activation-changed.html b/example/public/on-activation-changed.html index f180c541..e1e307b4 100644 --- a/example/public/on-activation-changed.html +++ b/example/public/on-activation-changed.html @@ -34,7 +34,9 @@ this.setState({ isActive }); } }}> - <InstructionsLabel /> + {() => ( + <InstructionsLabel /> + )} </ReactCursorPosition> <ActivationChangedLabel {...this.state} /> </div> diff --git a/example/public/on-detected-environment-changed.html b/example/public/on-detected-environment-changed.html index 16137ba3..2e91bfff 100644 --- a/example/public/on-detected-environment-changed.html +++ b/example/public/on-detected-environment-changed.html @@ -32,7 +32,9 @@ this.setState({ detectedEnvironment }); } }}> - <InstructionsLabel /> + {() => ( + <InstructionsLabel /> + )} </ReactCursorPosition> <DetectedEnvironmentChangeLabel {...this.state} /> </div> diff --git a/example/public/on-position-changed.html b/example/public/on-position-changed.html index 1a1fdc30..d82bb999 100644 --- a/example/public/on-position-changed.html +++ b/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> diff --git a/example/public/should-decorate-children.html b/example/public/should-decorate-children.html deleted file mode 100644 index b34e56d6..00000000 --- a/example/public/should-decorate-children.html +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - - - - Should Decorate Children | Code Example | React Cursor Position - - -
-
-import React from 'react';
-import ReactCursorPosition from 'react-cursor-position';
-
-import PositionLabel from './PositionLabel';
-import InstructionsLabel from './InstructionsLabel';
-
-export default class extends React.Component {
-    constructor(props) {
-         super(props);
-        this.state = {
-            isPositionOutside: true,
-            position: {
-                x: 0,
-                y: 0
-            }
-        }
-    }
-
-    render() {
-        return (
-            <div className="example">
-                <ReactCursorPosition  {...{
-                    className: 'example__target',
-                    onPositionChanged: props => this.setState(props),
-                    shouldDecorateChildren: false
-                }}>
-                    <PositionLabel />
-                    <InstructionsLabel />
-                </ReactCursorPosition>
-                <PositionLabel {...this.state} {...{
-                    className: 'example__external-label',
-                    shouldShowIsActive: false }
-                }/>
-            </div>
-        );
-    }
-}
-
-
- - - - - diff --git a/example/public/style.html b/example/public/style.html index 6c905383..6b79371e 100644 --- a/example/public/style.html +++ b/example/public/style.html @@ -29,8 +29,12 @@ return ( <ReactCursorPosition {...{ style }}> - <PositionLabel /> - <InstructionsLabel /> + {(cursorProps) => ( + <div> + <PositionLabel {...cursorProps} /> + <InstructionsLabel /> + </div> + )} </ReactCursorPosition> ); } diff --git a/example/src/components/ActivationByClick.js b/example/src/components/ActivationByClick.js index a4f91294..4518bf1a 100644 --- a/example/src/components/ActivationByClick.js +++ b/example/src/components/ActivationByClick.js @@ -7,10 +7,13 @@ export default () => ( className="example__target" activationInteractionMouse={INTERACTIONS.CLICK} > - -
- Click to activate. Hover. Then click again to deactivate. -
+ {(cursorProps) => ( +
+ +
+ Click to activate. Hover. Then click again to deactivate. +
+
+ )} ); - diff --git a/example/src/components/ActivationByHover.js b/example/src/components/ActivationByHover.js index 0251a121..02f5aea7 100644 --- a/example/src/components/ActivationByHover.js +++ b/example/src/components/ActivationByHover.js @@ -10,10 +10,14 @@ export default () => ( hoverDelayInMs={250} //default 0 hoverOffDelayInMs={150} //default 0 > - -
- -
+ {(cursorProps) => ( +
+ +
+ +
+
+ )} ); diff --git a/example/src/components/ActivationByPress.js b/example/src/components/ActivationByPress.js index f03e679e..ba5f3a28 100644 --- a/example/src/components/ActivationByPress.js +++ b/example/src/components/ActivationByPress.js @@ -9,10 +9,14 @@ export default () => ( pressDurationInMs={500} //default pressMoveThreshold={5} //default > - -
- Press and hold to activate, then drag -
+ {(cursorProps) => ( +
+ +
+ Press and hold to activate, then drag +
+
+ )} ); diff --git a/example/src/components/ActivationByTap.js b/example/src/components/ActivationByTap.js index 5dbdfaf3..9283043a 100644 --- a/example/src/components/ActivationByTap.js +++ b/example/src/components/ActivationByTap.js @@ -7,10 +7,14 @@ export default () => ( className="example__target" activationInteractionTouch={INTERACTIONS.TAP} > - -
- Tap to activate. Drag. Tap again to deactivate. -
+ {(cursorProps) => ( +
+ +
+ Tap to activate. Drag. Tap again to deactivate. +
+
+ )} ); diff --git a/example/src/components/ActivationByTouch.js b/example/src/components/ActivationByTouch.js index 4f7b0639..24a73bee 100644 --- a/example/src/components/ActivationByTouch.js +++ b/example/src/components/ActivationByTouch.js @@ -7,10 +7,14 @@ export default () => ( className="example__target" activationInteractionTouch={INTERACTIONS.TOUCH} > - -
- Touch and Drag -
+ {(cursorProps) => ( +
+ +
+ Touch and Drag +
+
+ )} ); diff --git a/example/src/components/ActivationChanged.js b/example/src/components/ActivationChanged.js index 39e04ff7..6ec7d68d 100644 --- a/example/src/components/ActivationChanged.js +++ b/example/src/components/ActivationChanged.js @@ -20,7 +20,9 @@ export default class extends React.Component { this.setState({ isActive }); } }}> - + {() => ( + + )} diff --git a/example/src/components/BasicExample.js b/example/src/components/BasicExample.js index aede0506..bbb42277 100644 --- a/example/src/components/BasicExample.js +++ b/example/src/components/BasicExample.js @@ -10,8 +10,12 @@ export default class extends React.Component { - - + {(cursorProps) => ( +
+ + +
+ )} ); } diff --git a/example/src/components/ClassName.js b/example/src/components/ClassName.js index 4e0cc4c8..c089cddb 100644 --- a/example/src/components/ClassName.js +++ b/example/src/components/ClassName.js @@ -5,7 +5,11 @@ import InstructionsLabel from './InstructionsLabel'; export default () => ( - - + {(cursorProps) => ( +
+ + +
+ )} ); diff --git a/example/src/components/DetectedEnvironmentChanged.js b/example/src/components/DetectedEnvironmentChanged.js index d900e4ab..6c5ba9ef 100644 --- a/example/src/components/DetectedEnvironmentChanged.js +++ b/example/src/components/DetectedEnvironmentChanged.js @@ -20,7 +20,9 @@ export default class extends React.Component { this.setState({ detectedEnvironment }); } }}> - + {() => ( + + )} diff --git a/example/src/components/MapProps.js b/example/src/components/MapProps.js deleted file mode 100644 index 85e48e12..00000000 --- a/example/src/components/MapProps.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import ReactCursorPosition from '../pkg-lnk/ReactCursorPosition'; -import PointPositionLabel from './PointPositionLabel'; -import InstructionsLabel from './InstructionsLabel'; - -export default () => ( - { - return { - elementDimensions, - isActive, - isOutside: isPositionOutside, - point: position - }; - }} - > - - - -); diff --git a/example/src/components/PositionChanged.js b/example/src/components/PositionChanged.js index 3426dde7..2b4a2844 100644 --- a/example/src/components/PositionChanged.js +++ b/example/src/components/PositionChanged.js @@ -26,7 +26,9 @@ export default class extends React.Component { className: 'example__target', onPositionChanged: props => this.setState(props) }}> - + {() => ( + + )} this.rcp = rcp } > -
- + {(cursorProps) => ( +
+
+ +
+ )}
); diff --git a/example/src/components/ShouldDecorateChildren.js b/example/src/components/ShouldDecorateChildren.js deleted file mode 100644 index ec9f56e4..00000000 --- a/example/src/components/ShouldDecorateChildren.js +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; -import ReactCursorPosition from '../pkg-lnk/ReactCursorPosition'; -import PositionLabel from './PositionLabel'; -import InstructionsLabel from './InstructionsLabel'; - - -export default class extends React.Component { - constructor(props) { - super(props); - this.state = { - elementDimensions: { - width: 0, - height: 0 - }, - isPositionOutside: true, - position: { - x: 0, - y: 0 - } - } - } - - render() { - return ( -
- this.setState(props), - shouldDecorateChildren: false - }}> - - - - -
- ); - } -} diff --git a/example/src/components/Style.js b/example/src/components/Style.js index bf46769b..d5c6859a 100644 --- a/example/src/components/Style.js +++ b/example/src/components/Style.js @@ -16,8 +16,12 @@ export default class extends React.Component { return ( - - + {(cursorProps) => ( +
+ + +
+ )} ); } diff --git a/example/src/pages/Home.js b/example/src/pages/Home.js index c8088c3f..6b84d292 100644 --- a/example/src/pages/Home.js +++ b/example/src/pages/Home.js @@ -46,7 +46,6 @@ class App extends Component { Activate by Touch Class Name Hover Delay - Map Child Props On Environment Changed On Position Changed On Activation Changed diff --git a/example/src/pages/MapProps.js b/example/src/pages/MapProps.js deleted file mode 100644 index 4e05049f..00000000 --- a/example/src/pages/MapProps.js +++ /dev/null @@ -1,73 +0,0 @@ -import React, { Component } from 'react'; -import { - Col, - Grid, - Jumbotron, - Row -} from 'react-bootstrap'; -import Helmet from 'react-helmet'; - -import MapProps from '../components/MapProps'; -import Header from '../components/Header'; - -import 'bootstrap/dist/css/bootstrap.css'; -import '../styles/app.css'; - -class MapChildPropsPage extends Component { - render() { - return ( -
- -
- - - - -

Map Child Props - API Example

- - - - -
    -
  • Implement mapChildProps to model child component props to your custom shape
    • -
  • Easily make react-cursor-position conform to the API of your components
    • -
- - - - - - - - - - - - - -