File tree Expand file tree Collapse file tree 2 files changed +27
-2
lines changed Expand file tree Collapse file tree 2 files changed +27
-2
lines changed Original file line number Diff line number Diff line change 1
1
import React from "react" ;
2
+ import useMouseCoords from "./hooks/useMouseCoords" ;
2
3
import "./styles.css" ;
3
4
4
5
export default function App ( ) {
6
+ const [ x , y ] = useMouseCoords ( ) ;
5
7
return (
6
8
< div className = "App" >
7
9
< h1 > Custom Hook Series</ h1 >
8
10
< h2 > Let's create some useful hooks in React.JS!</ h2 >
9
11
< div className = "container" >
10
- < span > X </ span >
12
+ < span > { x } </ span >
11
13
< span > - </ span >
12
- < span > Y </ span >
14
+ < span > { y } </ span >
13
15
</ div >
14
16
</ div >
15
17
) ;
Original file line number Diff line number Diff line change
1
+ import { useState , useEffect } from "react" ;
2
+
3
+ const useMouseCoords = ( ) => {
4
+
5
+ const [ coords , setCoords ] = useState ( [ 0 , 0 ] ) ;
6
+
7
+ useEffect ( ( ) => {
8
+ const handleCoords = ( { clientX, clientY } ) => {
9
+ setCoords ( [ clientX , clientY ] ) ;
10
+ }
11
+
12
+ window . addEventListener ( "mousemove" , handleCoords ) ;
13
+
14
+ return ( ) => {
15
+ window . removeEventListener ( "mousemove" , handleCoords ) ;
16
+ }
17
+
18
+ } , [ ] ) ;
19
+
20
+ return coords ;
21
+ }
22
+
23
+ export default useMouseCoords ;
You can’t perform that action at this time.
0 commit comments