Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@use-it/event-listener
Advanced tools
Readme
A custom React Hook that provides a declarative useEventListener.
This hook was inspired by Dan Abramov's blog post "Making setInterval Declarative with React Hooks".
I needed a way to simplify the plumbing around adding and removing an event listener in a custom hook. That lead to a chain of tweets between Dan and myself.
$ npm i @use-it/event-listener
or
$ yarn add @use-it/event-listener
Here is a basic setup.
useEventListener(eventName, handler, element, options);
Here are the parameters that you can use. (* = optional)
Parameter | Description |
---|---|
eventName | The event name (string). Here is a list of common events. |
handler | A function that will be called whenever eventName fires on element . |
element * | An optional element to listen on. Defaults to global (i.e., window ). |
options * | An object { capture?: boolean, passive?: boolean, once?: boolean } to be passed to addEventListener . For advanced use cases. See MDN for details. |
This hook returns nothing.
Let's look at some sample code. Suppose you would like to track the mouse position. You could subscribe to mouse move events with like this.
const useMouseMove = () => {
const [coords, setCoords] = useState([0, 0]);
useEffect(() => {
const handler = ({ clientX, clientY }) => {
setCoords([clientX, clientY]);
};
window.addEventListener('mousemove', handler);
return () => {
window.removeEventListener('mousemove', handler);
};
}, []);
return coords;
};
Here we're using useEffect
to roll our own handler add/remove event listener.
useEventListener
abstracts this away. You only need to care about the event name
and the handler function.
const useMouseMove = () => {
const [coords, setCoords] = useState([0, 0]);
useEventListener('mousemove', ({ clientX, clientY }) => {
setCoords([clientX, clientY]);
});
return coords;
};
You can view/edit the sample code above on CodeSandbox.
MIT Licensed
Thanks goes to these wonderful people (emoji key):
Donavon West 🚇 ⚠️ 💡 🤔 🚧 👀 🔧 💻 | Kevin Kipp 💻 | Justin Hall 💻 📖 | Jeow Li Huan 👀 | Norman Rzepka 🤔 | Beer van der Drift ⚠️ 💻 | clingsoft 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
FAQs
A custom React Hook that provides a useEventListener.
The npm package @use-it/event-listener receives a total of 84,910 weekly downloads. As such, @use-it/event-listener popularity was classified as popular.
We found that @use-it/event-listener demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.