Skip to content

Commit 8ad1fbd

Browse files
debabindebabin
committed
main 🧊 v0.3.18
1 parent db0dbdb commit 8ad1fbd

18 files changed

Lines changed: 110 additions & 214 deletions

File tree

‎packages/core/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@siberiacancode/reactuse",
3-
"version": "0.3.17",
3+
"version": "0.3.18",
44
"description": "The ultimate collection of react hooks",
55
"author": {
66
"name": "SIBERIA CAN CODE 🧊",

‎packages/core/src/bundle/hooks/useAutoScroll/useAutoScroll.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ import { useRefState } from '../useRefState/useRefState';
1818
* @overload
1919
* @template Target
2020
* @param {boolean} [options.enabled] Whether auto-scrolling is enabled
21-
* @returns {{ ref: StateRef<Target> }} A React ref to attach to the list element
21+
* @returns {StateRef<Target>} A React ref to attach to the list element
2222
*
2323
* @example
24-
* const { ref } = useAutoScroll();
24+
* const ref = useAutoScroll();
2525
*/
2626
export const useAutoScroll = (...params) => {
2727
const target = isTarget(params[0]) ? params[0] : undefined;
@@ -84,5 +84,5 @@ export const useAutoScroll = (...params) => {
8484
};
8585
}, [enabled, target && isTarget.getRawElement(target), internalRef.state]);
8686
if (target) return;
87-
return { ref: internalRef };
87+
return internalRef;
8888
};

‎packages/core/src/bundle/hooks/useClickOutside/useClickOutside.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ import { useRefState } from '../useRefState/useRefState';
1818
* @overload
1919
* @template Target The target element(s)
2020
* @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected
21-
* @returns {{ ref: StateRef<Target> }} A ref to attach to the target element
21+
* @returns {StateRef<Target>} A ref to attach to the target element
2222
*
2323
* @example
24-
* const { ref } = useClickOutside<HTMLDivElement>(() => console.log('click outside'));
24+
* const ref = useClickOutside<HTMLDivElement>(() => console.log('click outside'));
2525
*
2626
* @see {@link https://siberiacancode.github.io/reactuse/functions/hooks/useClickOutside.html}
2727
*/
@@ -46,5 +46,5 @@ export const useClickOutside = (...params) => {
4646
};
4747
}, [target && isTarget.getRawElement(target), internalRef.state]);
4848
if (target) return;
49-
return { ref: internalRef };
49+
return internalRef;
5050
};

‎packages/core/src/bundle/hooks/useDoubleClick/useDoubleClick.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ export const DEFAULT_THRESHOLD_TIME = 300;
2121
* @template Target The target element
2222
* @param {(event: DoubleClickEvents) => void} callback The callback function to be invoked on double click
2323
* @param {UseDoubleClickOptions} [options] The options for the double click
24-
* @returns {{ ref: StateRef<Target> }} The double clicking state
24+
* @returns {StateRef<Target>} The double clicking state
2525
*
2626
* @example
27-
* const { ref } = useDoubleClick(() => console.log('double clicked'));
27+
* const ref = useDoubleClick(() => console.log('double clicked'));
2828
*
2929
* @see {@link https://siberiacancode.github.io/reactuse/functions/hooks/useDoubleClick.html}
3030
*/
@@ -67,7 +67,5 @@ export const useDoubleClick = (...params) => {
6767
};
6868
}, [target && isTarget.getRawElement(target), internalRef.state]);
6969
if (target) return;
70-
return {
71-
ref: internalRef
72-
};
70+
return internalRef;
7371
};

‎packages/core/src/bundle/hooks/useKeyPressEvent/useKeyPressEvent.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { useRefState } from '../useRefState/useRefState';
2222
* @param {UseKeyPressEventKey} key The key or array of keys to listen for.
2323
* @param {(event: KeyboardEvent) => void} listener The callback function to be executed when the specified key or keys are pressed.
2424
* @param {UseKeyPressEventOptions} [options] The options for the event listener.
25-
* @returns {{ ref: StateRef<Target> }} An object containing the ref
25+
* @returns {StateRef<Target>} A ref to attach to the target element
2626
*
2727
* @example
2828
* const ref = useKeyPressEvent('Enter', (event) => console.log('pressed'));

‎packages/core/src/bundle/hooks/useKeyboard/useKeyboard.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,18 @@ import { useRefState } from '../useRefState/useRefState';
2626
* @overload
2727
* @template Target The target element type
2828
* @param {KeyboardEventHandler} callback The callback function to be invoked on key down
29-
* @returns {{ ref: StateRef<Target> }} An object containing the ref
29+
* @returns {StateRef<Target>} A ref to attach to the target element
3030
*
3131
* @example
32-
* const keyboard = useKeyboard((event) => console.log('key down'));
32+
* const ref = useKeyboard((event) => console.log('key down'));
3333
*
3434
* @overload
3535
* @template Target The target element type
3636
* @param {UseKeyboardEventOptions} [options] The keyboard event options
37-
* @returns {{ ref: StateRef<Target> }} An object containing the ref
37+
* @returns {StateRef<Target>} A ref to attach to the target element
3838
*
3939
* @example
40-
* const keyboard = useKeyboard({ onKeyDown: (event) => console.log('key down'), onKeyUp: (event) => console.log('key up') });
40+
* const ref = useKeyboard({ onKeyDown: (event) => console.log('key down'), onKeyUp: (event) => console.log('key up') });
4141
*/
4242
export const useKeyboard = (...params) => {
4343
const target = isTarget(params[0]) ? params[0] : undefined;
@@ -63,5 +63,5 @@ export const useKeyboard = (...params) => {
6363
};
6464
}, [target && isTarget.getRawElement(target), internalRef.state]);
6565
if (target) return;
66-
return { ref: internalRef };
66+
return internalRef;
6767
};

‎packages/core/src/hooks/useAutoScroll/useAutoScroll.demo.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useState } from 'react';
44
const Demo = () => {
55
const [messages, setMessages] = useState([`Message 1 at ${new Date().toLocaleTimeString()}`]);
66

7-
const autoScroll = useAutoScroll<HTMLUListElement>();
7+
const autoScrollRef = useAutoScroll<HTMLUListElement>();
88

99
const onAddMessage = () =>
1010
setMessages((prev) => [
@@ -29,7 +29,7 @@ const Demo = () => {
2929
</div>
3030

3131
<ul
32-
ref={autoScroll.ref}
32+
ref={autoScrollRef}
3333
className='flex h-[200px] list-none! flex-col gap-1 overflow-y-auto scroll-smooth! p-0!'
3434
>
3535
{messages.map((message, index) => (

‎packages/core/src/hooks/useAutoScroll/useAutoScroll.test.ts‎

Lines changed: 18 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -64,40 +64,31 @@ targets.forEach((target) => {
6464
describe(`${target}`, () => {
6565
it('Should use auto scroll', () => {
6666
const { result } = renderHook(() => {
67-
if (target)
68-
return useAutoScroll(target) as unknown as {
69-
ref: StateRef<HTMLElement>;
70-
};
67+
if (target) return useAutoScroll(target) as unknown as StateRef<HTMLElement>;
7168
return useAutoScroll<HTMLElement>();
7269
});
7370

74-
if (!target) expect(result.current.ref).toBeTypeOf('function');
71+
if (!target) expect(result.current).toBeTypeOf('function');
7572
if (target) expect(result.current).toBeUndefined();
7673
});
7774

7875
it('Should use auto scroll on server side', () => {
7976
const { result } = renderHookServer(() => {
80-
if (target)
81-
return useAutoScroll(target) as unknown as {
82-
ref: StateRef<HTMLElement>;
83-
};
77+
if (target) return useAutoScroll(target) as unknown as StateRef<HTMLElement>;
8478
return useAutoScroll<HTMLElement>();
8579
});
8680

87-
if (!target) expect(result.current.ref).toBeTypeOf('function');
81+
if (!target) expect(result.current).toBeTypeOf('function');
8882
if (target) expect(result.current).toBeUndefined();
8983
});
9084

9185
it('Should auto scroll when content changes', () => {
9286
const { result } = renderHook(() => {
93-
if (target)
94-
return useAutoScroll(target) as unknown as {
95-
ref: StateRef<HTMLElement>;
96-
};
87+
if (target) return useAutoScroll(target) as unknown as StateRef<HTMLElement>;
9788
return useAutoScroll<HTMLElement>();
9889
});
9990

100-
if (!target) act(() => result.current.ref(element));
91+
if (!target) act(() => result.current(element));
10192

10293
act(() => trigger.callback(element));
10394

@@ -109,11 +100,11 @@ targets.forEach((target) => {
109100
if (target)
110101
return useAutoScroll(target, {
111102
enabled: false
112-
}) as unknown as { ref: StateRef<HTMLElement> };
103+
}) as unknown as StateRef<HTMLElement>;
113104
return useAutoScroll<HTMLElement>({ enabled: false });
114105
});
115106

116-
if (!target) act(() => result.current.ref(element));
107+
if (!target) act(() => result.current(element));
117108

118109
act(() => trigger.callback(element));
119110

@@ -125,11 +116,11 @@ targets.forEach((target) => {
125116
if (target)
126117
return useAutoScroll(target, {
127118
force: true
128-
}) as unknown as { ref: StateRef<HTMLElement> };
119+
}) as unknown as StateRef<HTMLElement>;
129120
return useAutoScroll<HTMLElement>({ force: true });
130121
});
131122

132-
if (!target) act(() => result.current.ref(element));
123+
if (!target) act(() => result.current(element));
133124

134125
act(() => {
135126
Object.defineProperty(element, 'scrollTop', { value: 200 });
@@ -143,14 +134,11 @@ targets.forEach((target) => {
143134

144135
it('Should handle auto scroll on manual scroll up', () => {
145136
const { result } = renderHook(() => {
146-
if (target)
147-
return useAutoScroll(target) as unknown as {
148-
ref: StateRef<HTMLElement>;
149-
};
137+
if (target) return useAutoScroll(target) as unknown as StateRef<HTMLElement>;
150138
return useAutoScroll<HTMLElement>();
151139
});
152140

153-
if (!target) act(() => result.current.ref(element));
141+
if (!target) act(() => result.current(element));
154142

155143
act(() => {
156144
Object.defineProperty(element, 'scrollTop', { value: 200 });
@@ -173,14 +161,11 @@ targets.forEach((target) => {
173161

174162
it('Should handle touch events', () => {
175163
const { result } = renderHook(() => {
176-
if (target)
177-
return useAutoScroll(target) as unknown as {
178-
ref: StateRef<HTMLElement>;
179-
};
164+
if (target) return useAutoScroll(target) as unknown as StateRef<HTMLElement>;
180165
return useAutoScroll<HTMLElement>();
181166
});
182167

183-
if (!target) act(() => result.current.ref(element));
168+
if (!target) act(() => result.current(element));
184169

185170
act(() => {
186171
element.dispatchEvent(
@@ -223,14 +208,11 @@ targets.forEach((target) => {
223208
const removeEventListenerSpy = vi.spyOn(element, 'removeEventListener');
224209

225210
const { result, unmount } = renderHook(() => {
226-
if (target)
227-
return useAutoScroll(target) as unknown as {
228-
ref: StateRef<HTMLElement>;
229-
};
211+
if (target) return useAutoScroll(target) as unknown as StateRef<HTMLElement>;
230212
return useAutoScroll<HTMLElement>();
231213
});
232214

233-
if (!target) act(() => result.current.ref(element));
215+
if (!target) act(() => result.current(element));
234216

235217
unmount();
236218

@@ -243,16 +225,13 @@ targets.forEach((target) => {
243225
it('Should handle target changes', () => {
244226
const { result, rerender } = renderHook(
245227
(target) => {
246-
if (target)
247-
return useAutoScroll(target) as unknown as {
248-
ref: StateRef<HTMLElement>;
249-
};
228+
if (target) return useAutoScroll(target) as unknown as StateRef<HTMLElement>;
250229
return useAutoScroll<HTMLElement>();
251230
},
252231
{ initialProps: target }
253232
);
254233

255-
if (!target) act(() => result.current.ref(element));
234+
if (!target) act(() => result.current(element));
256235

257236
expect(mockMutationObserverObserve).toHaveBeenCalledTimes(1);
258237

‎packages/core/src/hooks/useAutoScroll/useAutoScroll.ts‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,7 @@ export interface UseAutoScrollOptions {
1919
export interface UseAutoScroll {
2020
(target: HookTarget, options?: UseAutoScrollOptions): void;
2121

22-
<Target extends HTMLElement>(
23-
options?: UseAutoScrollOptions
24-
): {
25-
ref: StateRef<Target>;
26-
};
22+
<Target extends HTMLElement>(options?: UseAutoScrollOptions): StateRef<Target>;
2723
}
2824

2925
/**
@@ -43,10 +39,10 @@ export interface UseAutoScroll {
4339
* @overload
4440
* @template Target
4541
* @param {boolean} [options.enabled] Whether auto-scrolling is enabled
46-
* @returns {{ ref: StateRef<Target> }} A React ref to attach to the list element
42+
* @returns {StateRef<Target>} A React ref to attach to the list element
4743
*
4844
* @example
49-
* const { ref } = useAutoScroll();
45+
* const ref = useAutoScroll();
5046
*/
5147
export const useAutoScroll = ((...params: any[]) => {
5248
const target = isTarget(params[0]) ? params[0] : undefined;
@@ -132,5 +128,5 @@ export const useAutoScroll = ((...params: any[]) => {
132128
}, [enabled, target && isTarget.getRawElement(target), internalRef.state]);
133129

134130
if (target) return;
135-
return { ref: internalRef };
131+
return internalRef;
136132
}) as UseAutoScroll;

‎packages/core/src/hooks/useClickOutside/useClickOutside.demo.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useClickOutside, useCounter } from '@siberiacancode/reactuse';
44
const Demo = () => {
55
const counter = useCounter();
66

7-
const clickOutside = useClickOutside<HTMLDivElement>(() => {
7+
const clickOutsideRef = useClickOutside<HTMLDivElement>(() => {
88
console.log('click outside');
99
counter.inc();
1010
});
@@ -16,7 +16,7 @@ const Demo = () => {
1616
</p>
1717

1818
<div
19-
ref={clickOutside.ref}
19+
ref={clickOutsideRef}
2020
className={cn(
2121
'relative flex flex-col items-center justify-center rounded-xl border-2 border-red-500 p-12',
2222
{ 'border-green-500': counter.value > 5 }

0 commit comments

Comments
 (0)