ethanselzer / react-cursor-position Goto Github PK

When using "react-cursor-position": "^3.0.3", the following is the error received only on the server but not in the localhost.

react-dom.production.min.js:209 TypeError: Cannot convert undefined or null to object
at Function.keys ()
at t.value (ReactCursorPosition.js:497)
at t.value (ReactCursorPosition.js:510)
at La (react-dom.production.min.js:182)
at Da (react-dom.production.min.js:181)
at vo (react-dom.production.min.js:263)
at cu (react-dom.production.min.js:246)
at ou (react-dom.production.min.js:246)
at Zo (react-dom.production.min.js:239)
at qo (react-dom.production.min.js:230)

which is breaking the code here:
key: 'getPassThroughProps',
value: function getPassThroughProps() {
var ownPropNames = Object.keys(this.constructor.propTypes);
return omit(this.props, ownPropNames);
}
and here: var props = objectAssign({}, mapChildProps(this.state), this.getPassThroughProps());

One of the minor versions of React 16 (I think, 16.2?) changed the typeof response from function to object. This causes the method getIsReactComponent(reactElement) to return false, thereby causing the intended wrapped element to not have the position properties not added to its props.

First thank you for the great library!

I am opening a new one as it is a separate issue I think.

I have a setup where I am dividing the page into a grid. I need the position within each grid item. Each grid item is wrapped in a ReactCursorPosition.

When I drag these grid items around. The get position outside gets updated to isOutside... but it isn't. I just dragged the element to a new position.

What I would like to do is a either be able to reset the cursor after a drop. OR I think we could probably run init() if the position is outside.

So:

key: 'getIsPositionOutside',
        value: function getIsPositionOutside(position) {
            var x = position.x,
                y = position.y;
            var _elementOffset = this.elementOffset,
                elx = _elementOffset.x,
                ely = _elementOffset.y;
            var _state$elementDimensi = this.state.elementDimensions,
                elw = _state$elementDimensi.width,
                elh = _state$elementDimensi.height;

            var outside = x < elx || x > elx + elw || y < ely || y > ely + elh

            if (outside) {
                this.init();
            }

            return outside;
        }

Maybe I am doing something wrong? Or is this a bug? or am I asking for a feature?

Hello @ethanselzer :)
I use react-image-magnify with react 15.5 and i have this error:

ReactCursorPosition: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

Have you planned to update react-cursor-position to make it compatible with react 15.5 ?

This should allow more control of the properties, i.e. pass the coordinate information to grandchildren, etc.

https://reactjs.org/docs/render-props.html

I am using react-cursor-position to detect the position of the mouse when hovering an element and display a menu (menu on the left when cursor is on the left half, and on the right otherwise). Based on the cursor position, I set one of these 2 classes on the element : hover-right or hover-left

But my Component is also draggable using react-dnd:

@props.connectDragSource(
  <ReactCursorPosition>
    <Image />
  </ReactCursorPosition>
);

It seems to work fine overall, but sometimes (I have not been able to find the real reproduction conditions yet) it messes up completely and my react-dnd hovering events are triggered randomly in large quantity.

Do you have any idea on what can causes this, and how I can try to locate the cause (and fix it) ?

Thank you for creating this library, @ethanselzer!

It seems like you don't have the bandwidth to maintain the library at this point. Can you add someone else as a maintainer? I'm happy to do it if you don't have anyone else in mind. (github: @ragalie, npm: @ragaltron)

The most important steps are:

• Add as collaborator on Github to merge PRs: https://docs.github.com/en/github/setting-up-and-managing-your-github-user-account/inviting-collaborators-to-a-personal-repository
• Add as owner on npm to publish new versions: https://docs.npmjs.com/cli/v7/commands/npm-owner

Hello, very slick looking library! I was looking for a react component that gave coordinates from images and found this one.

I am looking for a component that has a click event. Use cases I have in mind include:

1. Double magnify an image: for example, click a point in an image, it opens a partially zoomed second image where you can hover to show a fully zoomed in third image.
2. I have an expensive callback that would get called too frequently with hover events. I could debounce it but I want the user to have better control over when it gets called.
3. Hand labeling data: for a machine learning task and I have some unlabeled data and I want to use this to help label parts of the image.

Does this feature interest you?
Thanks!

Thanks for your work on this library. It's been very useful so far!

Anyway, I'm developing a react app that is using react-cursor-position to capture the cursor position for a given div and whether or not the cursor is positioned inside a div.

Sadly, there is an issue with the mouseEnter event not being triggered on close of a custom modal div. Specifically, when the mouse is positioned over an element that contains a ReactCursorPosition component and the modal is closed, typically via a click, the mouseEnter event does not trigger upon the cursor "entering" the element. As I am relying on the isActive prop to be true when the element is in a hover state, this is problematic as isActive is set to true from the onMouseEnter function being called.

In my initial investigation into this issue, adding a mouseOver event listener that calls onMouseEnter
instead of onMouseEnter on the same div where the mouseEnter listener was present, fixes the issue, but it is not entirely clear why. I'm guessing it is because the cursor never actually "enters" the element when the modal closes, if "entering" means crossing into an element from its outer border. I also came across this explanation of the differences between mouseEnter and mouseOver, but it doesn't really clear much up.

Also, onMouseOver does trigger more frequently, so some check would have to be in place to make sure you aren't running the "onEnter" code more than once. It does work without such a check, but it doesn't make sense to call the code in onMouseEnter multiple times.

Is there a specific reason you are using onMouseEnter over onMouseOver? Either way, I'm hoping there is some solution for this issue. I can provide more details if needed and also make a PR with proposed changes if you think listening to the mouseOver event could work.

No issue, but I'm just wondering how to log when a user clicks the mouse pad at the current cursor position. So for instance, a person moves the cursor then clicks somewhere. I expected the state of the component to change isTouch, but through all the documentation and examples I have gone through, the value never changes.

-Referring to isTouch state prop, what makes it change?

Or will wrapping around this component allow the functionality I seek

Hi, would you consider not passing cursorPosition to children by default, or at least a way to prevent it, maybe by adding another parameter?

The reason I ask is because of:

Warning: Unknown prop cursorPosition on tag. Remove this prop from the element.

Most if not all elements will issue this warning. I'm aware that I can wrap those elements in a custom component, but that would add an unnecessary layer.

Off of a fresh npm install with either node 6.2.1 or 7.4.0 I get the following error:

Module not found: Can't resolve '../pkg-lnk/ReactCursorPosition' in '/Users/d4/code/react-cursor-position/example/src/components'

Hi, would it be possible to change pressDurationInMs after constructing the component?
I need to change it from the default 500 to 1 when a certain condition is met.

I'm seeing some incorrect y-positions after I scroll using my mouse wheel - the cursor remains inside the component. If I scroll by dragging the scroll bar, it's correct.

ReactCursorPosition and the component it's wrapping are inside a div with overfow-y: auto.

I'm happy to provide more detail if needed.

I think you miss "./" in the path to constants.js file
In the file ReactCursorPosition.js, line 6
import * as constants from 'constants';

The correct path is:
import * as constants from './constants';

I know you way is also accepted, but it can affect aliases created by webpack

This is an awesome package and thank you very much for it.

I am using it in a case where I only need to track the cursor in very select circumstances, and I'd love a way to disable the tracking when it's not needed to reduce re-renders.

I can conditionally load it, but that means unmounting and remounting the child components which has some side effects. Is there anything I can do about CPU usage?

Thanks again very much.

The library does not work as expected for a simple use case. Please see the following:

I click to bring the focus on the browser screen and once that is there, you can see that the mouse is outside the div but it still shows as inside. The reason for this is that you are wrapping the child with a div and that is actually much wider because of the css I have used to center the child div which is grey.

So even though the pointer is outside the child div, since it is inside the div you have used to wrap, the values in cursorPosition is incorrect. I am not very sure whether the approach of wrapping in a div will work.

Tasks

• Update code and tests
• Update README.md
• Update example site
• Update CodePen example (post release)

Notes

Output data structure shape should be:

{
    elementDimensions: {
        width: Number,
        height: Number
    }
    isActive: Boolean,
    isPositionOutside: Boolean,
    position: {
        x: Number,
        y: Number
    }
}

<div style={{width: w, height: h}}>
  <ReactCursorPosition>
    <Component />
  <ReactCursorPosition>
</div>

Before changing the w, h, the elementDimensions, position, isPositionOutside values are correct.
But after the w, h is changed during isPositionOutside == false, the values shows unexpected values.
For example, the x or y of the position can be negative number. and elementDimensions is not changed even if w, h are changed.

Hi,

const Memo = React.memo(props => {
  console.log(props);
  if (!props.position) throw new Error("No position");
  return <div>Yolo</div>;
});

function App() {
  return (
         <ReactCursorPosition>
            <Memo />
          </ReactCursorPosition>
  );
}

The Memo component in the example will throw an error. If you remove the Memo, props get passed as expected.

Please forgive me if this is not a bug and rather a limitation of React.memo. But the way I see it, props should be passed regardless, no?

Hi,

This tool works perfectly for our project. However, I have a question, is that possible to reset the cursor information when it moves out the object?

Thanks!

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

On Chrome 59 with verbose logging, this violation appears in the console:

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.

I have not looked further than this yet, but Chrome tips are often a good idea to investigate.

Hello, I am a developer and in my research I found its component for the interaction with the cursor (reaction-cursor-position). In my opinion, it is a good component and I need to use it in my project. Next I explain how I should use it. I need to change the size in the custom table so I need to get the mouse position when I do the mouse, I move and when I do the mouseup My question is how do I do this? I'd appreciate your help. regards

When using v2.5.0, I see numerous entries in Sentry with the same error report. I haven't used previous versions so I don't know if this is a new issue.

Unable to get property 'getCursorPosition' of undefined or null reference

In the code excerpt below, it implies that this.core is null/undefined

            this.schedulActivation(this.props.hoverDelayInMs);
        }
    }, {
        key: 'onMouseMove',
        value: function onMouseMove(e) {
            this.setPositionState(this.core.getCursorPosition(e));
        }
    }, {
        key: 'onMouseLeave',
        value: function onMouseLeave() {
            this.clearActivationTimers();

All the issues seem to be IE11 / Edge....
https://sentry.io/share/issue/b315166598af4d818172fd34cf2508db/
https://sentry.io/share/issue/4e135f3320604ae88d31a56f503906d7/
https://sentry.io/share/issue/b2a9bcd3f7144fe5b0f15cd1b5a2f81f/

I could need TypeScript type definitions for this component? That would be awesome and helpful for many cases in future. I have no experience writing those by myself and no time for that learning at the moment.

First of all, I appreciate your project.
This is very useful library.

I have some question.
Um...
I have known this library is consist of a div tag.
I would like to use this library inside a table tag.
But If I used it inside a table or tr tag, this log is appeared "Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>"

this is my html.
<div>
<table>
<tbody>
<div> <= react-cursor-position
<tr> <= this is other jsx component
</tr>
<div>
</tbody>
</table>
</div>

This was written on one jsx file.

If I changed react-cursor-position's location, this warning is not appeared.
but I can't use react-cursor-position's props.

What should I do?
Is there any way to select specific tag by class name or id and use react-cursor-position's props at child tag?

react: 16.9.13

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: ReactCursorPosition

When react-cursor-position is wrapped in react-slick and in modal container like react-responsive-modal it happens that the position of x or y can get negative even when the mouse is in the container.

To reproduce I created this Codesandbox POC https://codesandbox.io/s/wwwvzv1818

Steps to reproduce:

1. Visit https://codesandbox.io/s/wwwvzv1818 e.g in Chrome 71
2. Open the overly
3. slide the carousel to the left e.g 3 time
4. move the mouse

Current Result: x or y values go to negative, and isPositionOutside is set to true even when the mouse is in the container.

We've experienced this issue, when clicking on a button renders a ReactCursorPosition component, but the cursor is already inside the new component.

In this case, the init() function will not be called until the mouse exits and entered the component again.

An easy fix for this is to call init() function in onComponentDidMount.

I will include a PR to fix this issue.