Skip to content

Commit eaa32ad

Browse files
debabindebabin
committed
main 🧊 use scroll to rework
1 parent 6e8dffd commit eaa32ad

File tree

6 files changed

+227
-237
lines changed

6 files changed

+227
-237
lines changed

‎src/hooks/index.ts

Lines changed: 113 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,113 @@
1-
export { useBattery } from './useBattery/useBattery';
2-
export { useBoolean } from './useBoolean/useBoolean';
3-
export { useBrowserLanguage } from './useBrowserLanguage/useBrowserLanguage';
4-
export { useClickOutside } from './useClickOutside/useClickOutside';
5-
export { useCopyToClipboard } from './useCopyToClipboard/useCopyToClipboard';
6-
export { useCounter } from './useCounter/useCounter';
7-
export { useDebounceCallback } from './useDebounceCallback/useDebounceCallback';
8-
export { useDebounceValue } from './useDebounceValue/useDebounceValue';
9-
export { useDefault } from './useDefault/useDefault';
10-
export { useDidUpdate } from './useDidUpdate/useDidUpdate';
11-
export { useDisclosure } from './useDisclosure/useDisclosure';
12-
export { useDocumentEvent } from './useDocumentEvent/useDocumentEvent';
13-
export { useDocumentTitle } from './useDocumentTitle/useDocumentTitle';
14-
export { useDocumentVisibility } from './useDocumentVisibility/useDocumentVisibility';
15-
export { useEvent } from './useEvent/useEvent';
16-
export { useEventListener } from './useEventListener/useEventListener';
17-
export { useEyeDropper } from './useEyeDropper/useEyeDropper';
18-
export { useFavicon } from './useFavicon/useFavicon';
19-
export { useField } from './useField/useField';
20-
export { useFps } from './useFps/useFps';
21-
export { useFullscreen } from './useFullscreen/useFullscreen';
22-
export { useHash } from './useHash/useHash';
23-
export { useHotkeys } from './useHotkeys/useHotkeys';
24-
export { useHover } from './useHover/useHover';
25-
export { useIdle } from './useIdle/useIdle';
26-
export { useIntersectionObserver } from './useIntersectionObserver/useIntersectionObserver';
27-
export { useInterval } from './useInterval/useInterval';
28-
export { useIsFirstRender } from './useIsFirstRender/useIsFirstRender';
29-
export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
30-
export { useKeyboard } from './useKeyboard/useKeyboard';
31-
export { useKeyPress } from './useKeyPress/useKeyPress';
32-
export { useKeyPressEvent } from './useKeyPressEvent/useKeyPressEvent';
33-
export { useKeysPressed } from './useKeysPressed/useKeysPressed';
34-
export { useList } from './useList/useList';
35-
export { useLocalStorage } from './useLocalStorage/useLocalStorage';
36-
export { useLogger } from './useLogger/useLogger';
37-
export { useLongPress } from './useLongPress/useLongPress';
38-
export { useMap } from './useMap/useMap';
39-
export { useMediaQuery } from './useMediaQuery/useMediaQuery';
40-
export { useMemory } from './useMemory/useMemory';
41-
export { useMount } from './useMount/useMount';
42-
export { useMouse } from './useMouse/useMouse';
43-
export { useMutation } from './useMutation/useMutation';
44-
export { useNetwork } from './useNetwork/useNetwork';
45-
export { useOnline } from './useOnline/useOnline';
46-
export { useOperatingSystem } from './useOperatingSystem/useOperatingSystem';
47-
export { useOrientation } from './useOrientation/useOrientation';
48-
export { usePageLeave } from './usePageLeave/usePageLeave';
49-
export { usePaint } from './usePaint/usePaint';
50-
export { usePermission } from './usePermission/usePermission';
51-
export { usePreferredColorScheme } from './usePreferredColorScheme/usePreferredColorScheme';
52-
export { usePreferredLanguages } from './usePreferredLanguages/usePreferredLanguages';
53-
export { usePrevious } from './usePrevious/usePrevious';
54-
export { useQuery } from './useQuery/useQuery';
55-
export { useQueue } from './useQueue/useQueue';
56-
export { useRenderCount } from './useRenderCount/useRenderCount';
57-
export { useRenderInfo } from './useRenderInfo/useRenderInfo';
58-
export { useRerender } from './useRerender/useRerender';
59-
export { useScript } from './useScript/useScript';
60-
export { useScrollTo } from './useScrollTo/useScrollTo';
61-
export { useSessionStorage } from './useSessionStorage/useSessionStorage';
62-
export { useSet } from './useSet/useSet';
63-
export { useShare } from './useShare/useShare';
64-
export { useStep } from './useStep/useStep';
65-
export { useStorage } from './useStorage/useStorage';
66-
export { useTextSelection } from './useTextSelection/useTextSelection';
67-
export { useTime } from './useTime/useTime';
68-
export { useTimeout } from './useTimeout/useTimeout';
69-
export { useToggle } from './useToggle/useToggle';
70-
export { useUnmount } from './useUnmount/useUnmount';
71-
export { useWebSocket } from './useWebSocket/useWebSocket';
72-
export { useWindowEvent } from './useWindowEvent/useWindowEvent';
73-
export { useWindowSize } from './useWindowSize/useWindowSize';
74-
export { useWizard } from './useWizard/useWizard';
1+
export * from './useActiveElement/useActiveElement';
2+
export * from './useAsync/useAsync';
3+
export * from './useBattery/useBattery';
4+
export * from './useBoolean/useBoolean';
5+
export * from './useBreakpoints/useBreakpoints';
6+
export * from './useBrowserLanguage/useBrowserLanguage';
7+
export * from './useClickOutside/useClickOutside';
8+
export * from './useClipboard/useClipboard';
9+
export * from './useConst/useConst';
10+
export * from './useConst/useConst';
11+
export * from './useCounter/useCounter';
12+
export * from './useCssVar/useCssVar';
13+
export * from './useDebounceCallback/useDebounceCallback';
14+
export * from './useDebounceValue/useDebounceValue';
15+
export * from './useDefault/useDefault';
16+
export * from './useDeviceMotion/useDeviceMotion';
17+
export * from './useDeviceOrientation/useDeviceOrientation';
18+
export * from './useDidUpdate/useDidUpdate';
19+
export * from './useDisclosure/useDisclosure';
20+
export * from './useDocumentEvent/useDocumentEvent';
21+
export * from './useDocumentTitle/useDocumentTitle';
22+
export * from './useDocumentVisibility/useDocumentVisibility';
23+
export * from './useElementSize/useElementSize';
24+
export * from './useEvent/useEvent';
25+
export * from './useEventListener/useEventListener';
26+
export * from './useEyeDropper/useEyeDropper';
27+
export * from './useFavicon/useFavicon';
28+
export * from './useField/useField';
29+
export * from './useFileDialog/useFileDialog';
30+
export * from './useFocus/useFocus';
31+
export * from './useFps/useFps';
32+
export * from './useFullscreen/useFullscreen';
33+
export * from './useGamepad/useGamepad';
34+
export * from './useGeolocation/useGeolocation';
35+
export * from './useHash/useHash';
36+
export * from './useHotkeys/useHotkeys';
37+
export * from './useHover/useHover';
38+
export * from './useIdle/useIdle';
39+
export * from './useImage/useImage';
40+
export * from './useInfiniteScroll/useInfiniteScroll';
41+
export * from './useIntersectionObserver/useIntersectionObserver';
42+
export * from './useInterval/useInterval';
43+
export * from './useIsFirstRender/useIsFirstRender';
44+
export * from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
45+
export * from './useKeyboard/useKeyboard';
46+
export * from './useKeyPress/useKeyPress';
47+
export * from './useKeyPressEvent/useKeyPressEvent';
48+
export * from './useKeysPressed/useKeysPressed';
49+
export * from './useLastChanged/useLastChanged';
50+
export * from './useLatest/useLatest';
51+
export * from './useList/useList';
52+
export * from './useLocalStorage/useLocalStorage';
53+
export * from './useLogger/useLogger';
54+
export * from './useLongPress/useLongPress';
55+
export * from './useMap/useMap';
56+
export * from './useMeasure/useMeasure';
57+
export * from './useMediaQuery/useMediaQuery';
58+
export * from './useMemory/useMemory';
59+
export * from './useMount/useMount';
60+
export * from './useMouse/useMouse';
61+
export * from './useMutation/useMutation';
62+
export * from './useMutationObserver/useMutationObserver';
63+
export * from './useNetwork/useNetwork';
64+
export * from './useOffsetPagination/useOffsetPagination';
65+
export * from './useOnline/useOnline';
66+
export * from './useOperatingSystem/useOperatingSystem';
67+
export * from './useOptimistic/useOptimistic';
68+
export * from './useOrientation/useOrientation';
69+
export * from './useOtpCredential/useOtpCredential';
70+
export * from './usePageLeave/usePageLeave';
71+
export * from './usePaint/usePaint';
72+
export * from './useParallax/useParallax';
73+
export * from './usePermission/usePermission';
74+
export * from './usePointerLock/usePointerLock';
75+
export * from './usePostMessage/usePostMessage';
76+
export * from './usePreferredColorScheme/usePreferredColorScheme';
77+
export * from './usePreferredContrast/usePreferredContrast';
78+
export * from './usePreferredDark/usePreferredDark';
79+
export * from './usePreferredLanguages/usePreferredLanguages';
80+
export * from './usePreferredReducedMotion/usePreferredReducedMotion';
81+
export * from './usePrevious/usePrevious';
82+
export * from './useQuery/useQuery';
83+
export * from './useQueue/useQueue';
84+
export * from './useRaf/useRaf';
85+
export * from './useRafValue/useRafValue';
86+
export * from './useRenderCount/useRenderCount';
87+
export * from './useRenderInfo/useRenderInfo';
88+
export * from './useRerender/useRerender';
89+
export * from './useResizeObserver/useResizeObserver';
90+
export * from './useScreenOrientation/useScreenOrientation';
91+
export * from './useScript/useScript';
92+
export * from './useScroll/useScroll';
93+
export * from './useScrollTo/useScrollTo';
94+
export * from './useSessionStorage/useSessionStorage';
95+
export * from './useSet/useSet';
96+
export * from './useShare/useShare';
97+
export * from './useStep/useStep';
98+
export * from './useStopwatch/useStopwatch';
99+
export * from './useStorage/useStorage';
100+
export * from './useTextDirection/useTextDirection';
101+
export * from './useTextSelection/useTextSelection';
102+
export * from './useTime/useTime';
103+
export * from './useTimeout/useTimeout';
104+
export * from './useTimer/useTimer';
105+
export * from './useToggle/useToggle';
106+
export * from './useUnmount/useUnmount';
107+
export * from './useVibrate/useVibrate';
108+
export * from './useWebSocket/useWebSocket';
109+
export * from './useWindowEvent/useWindowEvent';
110+
export * from './useWindowFocus/useWindowFocus';
111+
export * from './useWindowScroll/useWindowScroll';
112+
export * from './useWindowSize/useWindowSize';
113+
export * from './useWizard/useWizard';

‎src/hooks/useEventListener/useEventListener.demo.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useEventListener } from './useEventListener';
33
const Demo = () => {
44
const ref = useEventListener<HTMLDivElement>(
55
'click',
6-
(event) => console.log('@click 1', event.target),
6+
(event) => console.log('@click', event.target),
77
{
88
passive: true
99
}

‎src/hooks/useScroll/useScroll.ts

Lines changed: 18 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { RefObject } from 'react';
22

3-
import { useEffect, useLayoutEffect, useRef, useState } from 'react';
3+
import { useEffect, useRef, useState } from 'react';
44

55
import { getElement, isTarget } from '@/utils/helpers';
66

@@ -15,15 +15,6 @@ export type UseScrollTarget =
1515
| Window;
1616

1717
export interface UseScrollOptions {
18-
/** Behavior of scrolling */
19-
behavior?: ScrollBehavior;
20-
21-
/** The initial x position. */
22-
x?: number;
23-
24-
/** The initial y position. */
25-
y?: number;
26-
2718
//* The on scroll callback */
2819
onScroll?: (params: UseScrollCallbackParams, event: Event) => void;
2920

@@ -85,14 +76,12 @@ export interface UseScroll {
8576
* @category Sensors
8677
*
8778
* @overload
88-
* @template Target The target element(s)
89-
* @param {number} [options.x] The initial x position
90-
* @param {number} [options.y] The initial y position
91-
* @param {ScrollBehavior} [options.behavior] The behavior of scrolling
92-
* @param {number} [options.offset.left] The left offset for arrived states
93-
* @param {number} [options.offset.right] The right offset for arrived states
94-
* @param {number} [options.offset.top] The top offset for arrived states
95-
* @param {number} [options.offset.bottom] The bottom offset for arrived states
79+
* @template Target The target element
80+
* @param {ScrollBehavior} [options.behavior = 'auto'] The behavior of scrolling
81+
* @param {number} [options.offset.left = 0] The left offset for arrived states
82+
* @param {number} [options.offset.right = 0] The right offset for arrived states
83+
* @param {number} [options.offset.top = 0] The top offset for arrived states
84+
* @param {number} [options.offset.bottom = 0] The bottom offset for arrived states
9685
* @param {(params: UseScrollCallbackParams, event: Event) => void} [options.onScroll] The callback function to be invoked on scroll
9786
* @param {(e: Event) => void} [options.onStop] The callback function to be invoked on scroll end
9887
* @returns {boolean} The state of scrolling
@@ -101,23 +90,21 @@ export interface UseScroll {
10190
* const scrolling = useScroll(ref, options);
10291
*
10392
* @overload
104-
* @template Target The target element(s)
93+
* @template Target The target element
10594
* @param {(params: UseScrollCallbackParams, event: Event) => void} [callback] The callback function to be invoked on scroll
10695
* @returns {boolean} The state of scrolling
10796
*
10897
* @example
10998
* const scrolling = useScroll(ref, () => console.log('callback'));
11099
*
111100
* @overload
112-
* @template Target The target element(s)
113-
* @param {Target} target The target element(s) to detect outside clicks for
114-
* @param {number} [options.x] The initial x position
115-
* @param {number} [options.y] The initial y position
116-
* @param {ScrollBehavior} [options.behavior] The behavior of scrolling
117-
* @param {number} [options.offset.left] The left offset for arrived states
118-
* @param {number} [options.offset.right] The right offset for arrived states
119-
* @param {number} [options.offset.top] The top offset for arrived states
120-
* @param {number} [options.offset.bottom] The bottom offset for arrived states
101+
* @template Target The target element
102+
* @param {Target} target The target element to scroll
103+
* @param {ScrollBehavior} [options.behavior = 'auto'] The behavior of scrolling
104+
* @param {number} [options.offset.left = 0] The left offset for arrived states
105+
* @param {number} [options.offset.right = 0] The right offset for arrived states
106+
* @param {number} [options.offset.top = 0] The top offset for arrived states
107+
* @param {number} [options.offset.bottom = 0] The bottom offset for arrived states
121108
* @param {(params: UseScrollCallbackParams, event: Event) => void} [options.onScroll] The callback function to be invoked on scroll
122109
* @param {(e: Event) => void} [options.onStop] The callback function to be invoked on scroll end
123110
* @returns {[(node: Target) => void, boolean]} The state of scrolling
@@ -126,8 +113,8 @@ export interface UseScroll {
126113
* const [ref, scrolling] = useScroll(options);
127114
*
128115
* @overload
129-
* @template Target The target element(s)
130-
* @param {Target} target The target element(s) to detect outside clicks for
116+
* @template Target The target element
117+
* @param {Target} target The target element to scroll
131118
* @param {(params: UseScrollCallbackParams, event: Event) => void} [callback] The callback function to be invoked on scroll
132119
* @returns {[(node: Target) => void, boolean]} The state of scrolling
133120
*
@@ -136,7 +123,6 @@ export interface UseScroll {
136123
*/
137124
export const useScroll = ((...params: any[]) => {
138125
const target = (isTarget(params[0]) ? params[0] : undefined) as UseScrollTarget | undefined;
139-
console.log('target', target);
140126
const options = (
141127
target
142128
? typeof params[1] === 'object'
@@ -151,23 +137,8 @@ export const useScroll = ((...params: any[]) => {
151137
const internalOptionsRef = useRef(options);
152138
internalOptionsRef.current = options;
153139

154-
const { x = 0, y = 0, behavior = 'auto' } = options ?? {};
155-
156140
const [scrolling, setScrolling] = useState(false);
157-
const scrollPositionRef = useRef({ x, y });
158-
159-
useLayoutEffect(() => {
160-
if (!target && !internalRef) return;
161-
const element = (target ? getElement(target) : internalRef) as Element;
162-
163-
if (!element) return;
164-
165-
element.scrollTo({
166-
left: x,
167-
top: y,
168-
behavior
169-
});
170-
}, []);
141+
const scrollPositionRef = useRef({ x: 0, y: 0 });
171142

172143
useEffect(() => {
173144
if (!target && !internalRef) return;

‎src/hooks/useScrollTo/useScrollTo.demo.tsx

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,33 @@
1-
import { useScrollTo } from "@/hooks/useScrollTo/useScrollTo";
1+
import { CSSProperties } from "react";
2+
import { useScrollTo } from "./useScrollTo";
23

3-
const blockStyle = {
4+
const blockStyle: CSSProperties = {
45
border: '1px solid gray',
5-
height: 300,
6-
width: 300,
7-
}
6+
width: '100%',
7+
padding: 20,
8+
textAlign: 'center',
9+
borderRadius: 5,
10+
height: 250,
11+
marginBottom: 10
12+
};
813

914
const Demo = () => {
10-
const {targetToScroll, scrollToTarget} = useScrollTo<HTMLDivElement>();
15+
const scrollTo = useScrollTo<HTMLDivElement>({ x: 0, y: 260 });
1116

12-
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
13-
event.preventDefault();
14-
event.stopPropagation();
15-
scrollToTarget();
16-
};
17-
18-
1917
return (
20-
<>
21-
<button onClick={handleClick}>Scroll to block 3</button>
22-
<div style={{overflow: 'auto', height: '320px', position: 'relative' }}>
23-
<div style={blockStyle}>Block 1</div>
24-
<div style={blockStyle}>Block 2</div>
25-
<div ref={targetToScroll} style={blockStyle}>Block 3</div>
18+
<div>
19+
<div ref={scrollTo.ref} style={{ overflow: 'auto', height: 300, padding: 20 }}>
20+
<div style={blockStyle}>First amazing block</div>
21+
<div style={blockStyle}>Second amazing block</div>
22+
<div style={blockStyle}>Third amazing block</div>
23+
</div>
24+
<div>
25+
<button type="button" onClick={() => scrollTo.trigger({ x: 0, y: 0 })}>Scroll to block 1</button>
26+
<button type="button" onClick={() => scrollTo.trigger({ x: 0, y: 260 })}>Scroll to block 2</button>
27+
<button type="button" onClick={() => scrollTo.trigger({ x: 0, y: 520 })}>Scroll to block 3</button>
2628
</div>
27-
</>
28-
)
29-
}
29+
</div>
30+
);
31+
};
3032

31-
export default Demo
33+
export default Demo;

0 commit comments

Comments
 (0)