this repo has no description
Better throttle instead of debounce
+12
-18
+12
-18
src/utils/useTruncated.js
+12
-18
src/utils/useTruncated.js
···
1
1
import { useRef } from 'preact/hooks';
2
-
import { useDebouncedCallback } from 'use-debounce';
2
+
import { useThrottledCallback } from 'use-debounce';
3
3
import useResizeObserver from 'use-resize-observer';
4
4
5
5
export default function useTruncated({ className = 'truncated' } = {}) {
6
6
const ref = useRef();
7
-
const onResize = useDebouncedCallback(
8
-
({ height }) => {
9
-
if (ref.current) {
10
-
const { scrollHeight } = ref.current;
11
-
let truncated = scrollHeight > height;
12
-
if (truncated) {
13
-
const { height: _height, maxHeight } = getComputedStyle(ref.current);
14
-
const computedHeight = parseInt(maxHeight || _height, 10);
15
-
truncated = scrollHeight > computedHeight;
16
-
}
17
-
ref.current.classList.toggle(className, truncated);
7
+
const onResize = useThrottledCallback(({ height }) => {
8
+
if (ref.current) {
9
+
const { scrollHeight } = ref.current;
10
+
let truncated = scrollHeight > height;
11
+
if (truncated) {
12
+
const { height: _height, maxHeight } = getComputedStyle(ref.current);
13
+
const computedHeight = parseInt(maxHeight || _height, 10);
14
+
truncated = scrollHeight > computedHeight;
18
15
}
19
-
},
20
-
300,
21
-
{
22
-
maxWait: 2000,
23
-
},
24
-
);
16
+
ref.current.classList.toggle(className, truncated);
17
+
}
18
+
}, 300);
25
19
useResizeObserver({
26
20
ref,
27
21
box: 'border-box',