Comments (8)
This seems like it could be an antipattern. Wouldn't it be simpler if window
always had a mouseup
event handler? If mouseup
occurs but mouseDown == false
, the mouseup
handler would just do nothing.
If I am missing something about your use case, feel free to explain.
from use-event-listener.
The basic idea would be to avoid maybe having unnecessary mouseup handlers if there are many elements on the screen, but also sort of avoid having unnecessary logic in my mouseup handler to make it relevant only when a sort of "click and drag" is happening
This sometimes occurs if I have like say, a slider
<------->
I start by clicking on the dashes
Then I quickly drag my mouse to the right and it goes fully off the slider but I still want to capture the mouse up, so I add a global event handler to make this work
from use-event-listener.
The use case I have isn't specifically for slider but you can see slider app using this type of thing here https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Slider/Slider.js
from use-event-listener.
It might be outside the scope of this repo but I was just thinking...if there was a way to simplify this type of logic, it would be pretty nice
from use-event-listener.
Cool, I see what you are trying to accomplish now. You really just want a more straightforward way to write the code and you want peace of mind that there is no performance degradation due to having many unnecessary mouseup
handlers.
It would be nice if you could do:
const [mouseDown, setMouseDown] = useState(false)
function mouseUpHandler() { ... }
useEventListener('mouseup', mouseDown ? mouseUpHandler : undefined)
return <div onMouseDown={() => setMouseDown(true)}/>
Is this how you want it to work? (this doesn't work currently)
I was going to go ahead and implement this new feature, but now I'm concerned about a race condition. The mouseup
event could occur before the React component rerenders, in which cause mouseUpHandler
would not be called. Even if this works in today's React, it might stop working when React starts doing async rendering. What are you thoughts here?
from use-event-listener.
It does seem like these is a danger in using conditionals in hooks like this. It seems like maybe it would be ideal to have a dependency array type thing a la useeffect
useEventListener('mouseup', () => {
if(mouseDown) {
mouseUpHandler()
}
}, [mouseDown])
Note: haven't really fully thought it through...just copying the useEffect style of thought :)
from use-event-listener.
useEventListener
always uses the latest event handler function you provide, so I don't see the benefit of passing a dependency array.
Adding this feature seems deceptively complicated because of potential race conditions. I'm going to close the issue for now since there is an easy (if not ideal) workaround. If you can think of good way to make useEventListener
conditional, we can discuss further.
from use-event-listener.
Just in case anyone comes across this, my original case (adding a global mouse up and mouse move handler after a mouse down) is actually nicely solved by pointerEvents (just setPointerCapture and then pointMove and pointerUp do not have to be global, see https://codesandbox.io/s/ox5lx949oq)
from use-event-listener.
Related Issues (19)
- How to add listener for particular group of DOM Elements? HOT 3
- Feature request: have more specific parameter typings
- Hook doesn't allow `element` to be null HOT 1
- add all-contributors HOT 2
- Discuss design decision of underlying implementation HOT 2
- TypeScript definitions in repo do not match with latest version on npm HOT 4
- [Question] Please show example how create another hook based on that HOT 1
- Support for event listener options HOT 4
- Do not work, If we pass element as ref HOT 9
- Republish the package with updated peerDependencies 'cause now we have a problem for React 17 HOT 5
- adding duplicate events HOT 1
- Removing event listener HOT 2
- eslint conditional issue
- Saving handler in useEffect() HOT 1
- does not work with chrome.runtime.onMessage
- How to prevent event propagation / bubbling? HOT 1
- How to add listener on DOM element ? HOT 4
- Is useEffect necessary to update the ref? (genuine question) HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from use-event-listener.