-
-
Notifications
You must be signed in to change notification settings - Fork 3.2k
/
Copy pathuseLocation.ts
90 lines (72 loc) Β· 2.01 KB
/
useLocation.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import { useEffect, useState } from 'react';
import { isBrowser, off, on } from './misc/util';
const patchHistoryMethod = (method) => {
const history = window.history;
const original = history[method];
history[method] = function (state) {
const result = original.apply(this, arguments);
const event = new Event(method.toLowerCase());
(event as any).state = state;
window.dispatchEvent(event);
return result;
};
};
if (isBrowser) {
patchHistoryMethod('pushState');
patchHistoryMethod('replaceState');
}
export interface LocationSensorState {
trigger: string;
state?: any;
length?: number;
hash?: string;
host?: string;
hostname?: string;
href?: string;
origin?: string;
pathname?: string;
port?: string;
protocol?: string;
search?: string;
}
const useLocationServer = (): LocationSensorState => ({
trigger: 'load',
length: 1,
});
const buildState = (trigger: string) => {
const { state, length } = window.history;
const { hash, host, hostname, href, origin, pathname, port, protocol, search } = window.location;
return {
trigger,
state,
length,
hash,
host,
hostname,
href,
origin,
pathname,
port,
protocol,
search,
};
};
const useLocationBrowser = (): LocationSensorState => {
const [state, setState] = useState(buildState('load'));
useEffect(() => {
const onPopstate = () => setState(buildState('popstate'));
const onPushstate = () => setState(buildState('pushstate'));
const onReplacestate = () => setState(buildState('replacestate'));
on(window, 'popstate', onPopstate);
on(window, 'pushstate', onPushstate);
on(window, 'replacestate', onReplacestate);
return () => {
off(window, 'popstate', onPopstate);
off(window, 'pushstate', onPushstate);
off(window, 'replacestate', onReplacestate);
};
}, []);
return state;
};
const hasEventConstructor = typeof Event === 'function';
export default isBrowser && hasEventConstructor ? useLocationBrowser : useLocationServer;