Gathering detailed insights and metrics for @util-hooks/use-event
Installations
npm install @util-hooks/use-eventDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Releases
Unable to fetch releases
Contributors
1
Unable to fetch Contributors
Languages
1
TypeScript
TypeScript (100%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
saverioscagnoli
Download Statistics
Total Downloads
867
Last Day
2
Last Week
4
Last Month
24
Last Year
867
GitHub Statistics
27 Commits
1 Watching
1 Branches
1 Contributors
Bundle Size
648.00 B
Minified
359.00 B
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.0.8
Package Id
@util-hooks/use-event@1.0.8
Unpacked Size
17.28 kB
Size
3.86 kB
File Count
10
Publised On
21 Apr 2024
Total Downloads
Cumulative downloads
Total Downloads
867
Last day
100%
2
Compared to previous day
Last week
100%
4
Compared to previous week
Last month
300%
24
Compared to previous month
Last year
0%
867
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
2
Versions
React useEvent hook
With this hook, you can easily access events on any desired target in the DOM, and provide a custom callback to execute all of your misdeeds.
Usage
You can pass any target you want, but in case you don't, the default target is the document element.
1import { useEvent } from "@util-hooks/use-event"; 2 3const App = () => { 4 // This will trigger any time the DOM is clicked. 5 useEvent("click", evt => { 6 evt.preventDefault(); 7 console.log("clicked on the document!"); 8 }); 9 10 return <div>Hello world!</div>; 11}; 12 13export default App;
Usage with a target (ref):
1import { useRef } from "react"; 2import { useEvent } from "@util-hooks/use-event"; 3 4const App = () => { 5 const wrapperRef = useRef<HTMLDivElement>(null); 6 7 // This will trigger any time the orange div is clicked. 8 useEvent(wrapperRef, "click", evt => { 9 evt.preventDefault(); 10 console.log("clicked on the orange div!"); 11 }); 12 13 return ( 14 <div 15 ref={wrapperRef} 16 style={{ 17 width: "100px", 18 height: "100px", 19 backgroundColor: "orange" 20 }} 21 > 22 Hello world! 23 </div> 24 ); 25}; 26 27export default App;
Or you can use the window:
1// ...
2
3useEvent(window, "beforeunload", evt => {
4 console.log("The app is about to reload!!!!");
5});
6
7// ...Effect dependencies
Since this hook uses useEffect under the hood, if you have a state variable that you need to track, to prevent stale state,
you can pass a dependency list as you would do with a normal useEffect:
1import { useState, useRef } from "react"; 2import { useEvent } from "@util-hooks/use-event"; 3 4const App = () => { 5 const [count, setCount] = useState<number>(0); 6 const wrapperRef = useRef<HTMLDivElement>(null); 7 8 const target = wrapperRef.current; 9 10 // This will trigger any time the orange div is clicked. 11 useEvent( 12 target, 13 "click", 14 evt => { 15 evt.preventDefault(); 16 setCount(count + 1); 17 // Or, even better 18 setCount(prev => prev + 1); 19 }, 20 [count] 21 ); 22 23 return ( 24 <div 25 ref={wrapperRef} 26 style={{ 27 width: "100px", 28 height: "100px", 29 backgroundColor: "orange" 30 }} 31 > 32 {count} 33 </div> 34 ); 35};
Types
| Type | Description |
|---|---|
Target<T extends Element> | A union type that can be Document, Window, Element, or RefObject<T>. |
EventMap<U extends Element, T extends Target<U>> | A conditional type that maps to DocumentEventMap if T extends Document, WindowEventMap if T extends Window, or HTMLElementEventMap otherwise. |
Callback<U extends Element, T extends Target<U>, K extends keyof EventMap<U, T>, E extends EventMap<U, T>[K]> | A function type that takes an event of type E and returns void. E is an event type from EventMap<U, T>. |
DependencyList | An array of dependencies for the useEffect hook. This is imported from react. |
RefObject<T> | An object with a current property of type T. This is imported from react. |
useEvent | A function that takes a target, event name, callback, and optional dependencies, and sets up an event listener on the target for the specified event. |
Thanks
the tsup team, for making an awesome tool.
License
MIT License © Saverio Scagnoli 2024.
No vulnerabilities found.
No security vulnerabilities found.