do you have any examples around combining cursor and touch position?

[chrisdrackett]

would be nice to support mobile and desktop in the same component.

[ethanselzer]

@chrisdrackett - Thanks very much for your inquiry! I think you raise a great use case! I will create an example of react-cursor-position with react-touch-position and post back here. In the meantime I think a feature detection strategy is one approach that could be taken. It might look something like:

function getIsTouchEnv() {
    return ('ontouchstart' in window);
}

export default () => {
    return getIsTouchEnv()
    ? (
        <ReactTouchPosition {...{
            mapPropNames: ({  touchPosition }) => {  cursorPosition: touchPosition }
        }}>
            <YourComponent />
        </ReactTouchPosition>
    )
    : (
        <ReactCursorPosition>
            <YourComponent />
        </ReactCursorPosition>
    );

[ethanselzer]

@chrisdrackett - Your issue has raised my awareness to the value of a solution that unifies touch and pointer environments without a conditional render. I will prioritize creating this and post back here when it is released. In the meantime, if your use case is a better fit for a unified touch and pointer solution, consider something like the example in this gist. I really appreciate you opening this issue. Thanks!

[chrisdrackett]

no problem, and thanks for this component, it let me simplify our code while adding functionality. Never a bad thing!

[ethanselzer]

@chrisdrackett - I'm happy to inform you the latest version of react-cursor-position supports touch screen environments. The release notes contain an overview and cover breaking changes. As always, if you have questions or concerns, please post here or create a new issue.

Thanks again for your input. I think it helped make the project better!

[ethanselzer]

Hey @chrisdrackett - I'm closing this due to inactivity. If you have any questions or comments please let me know. Thanks again for opening this issue!