README
@haensl/hooks
Assorted React hooks.
Installation
npm
Via $ npm install -S @haensl/hooks
yarn
Via $ yarn add @haensl/hooks
Usage
Use hooks in your components:
import { useDebounce } from '@haensl/hooks';
const DebouncedButton = () => {
const handler = useDebounce(() => {
console.log('click');
}, 50);
return (
<button
onClick={ handler }
>click me</button>
);
};
Available hooks
useAnimationFrame
: animate a function.useBoundingClientRect
: keep track of a container's DOM rectangle.useDebounce
: debounce a function.useIsScrolling
: keep track of whether or not the user is scrolling.useOnScroll
: subscribe to scroll events.useWindowScroll
: keep track of thewindow
's scroll position.useWindowSize
: keep track of thewindow
's size.
useAnimationFrame(fn)
Uses requestAnimationFrame
to animate a function fn
. The callback is passed one single argument, the time delta in milliseconds that has passed between this and the last call. Please check the example below as well as the Codepen example.
Example
import React, { useState, useEffect } from 'react';
import { useAnimationFrame } from '@haensl/hooks';
const AnimatedTimer = () => {
const [seconds, setSeconds] = useState(0);
const [elapsed, setElapsed] = useState(0);
useAnimationFrame((dt) => {
setElapsed(elapsed + dt);
});
useEffect(() => {
if (elapsed >= 1000) {
setSeconds(seconds + 1);
setElapsed(elapsed - 1000);
}
}, [elapsed]);
return (
<span>{ seconds }</span>
);
};
→ Codepen example
useBoundingClientRect(ref, [debounceMs = 25])
Returns the DOM rectangle (initially null
) as returned by getBoundingClientRect
for the given container ref
. Changes are debounced by 25 milliseconds by default. Customize the debounce interval via the optional debounceMs
argument. Please check out the example below as well as the Codepen example.
Example
import React, { useRef } from 'react';
import { useBoundingClientRect } from '@haensl/hooks';
const RectTracker = () => {
const ref = useRef();
const containerRect = useBoundingClientRect(ref);
if (!containerRect) {
return (
<div ref={ ref }>
<span>no container rect</span>
</div>
);
}
return (
<div ref={ ref }>
<span>Container rect:</span>
<span>Width: {containerRect.width}</span>
<span>Height: {containerRect.height}</span>
</div>
);
};
→ Codepen example
useDebounce(fn, debounceMs)
Uses memoization to debounce fn
by debounceMs
milliseconds. Please check the example below as well as the Codepen example.
Example
import React from 'react';
import { useDebounce } from '@haensl/hooks';
const DebouncedButton = () => {
const handler = useDebounce(() => {
console.log('click');
}, 50); // handler only fires when there were no calls for 50ms.
return (
<button
onClick={ handler }
>click me</button>
);
};
→ Codepen example
useIsScrolling([el = window, scrollEndMs = 100])
Returns a boolean
indicating whether or not the user is scrolling. You can subscribe to a specific element via the first argument, el
(default: window
). End of scrolling is determined by no incoming scroll events for scrollEndMs
milliseconds (default: 100
). Please check the example blow as well as the Codepen example
Example
import React from 'react';
import { useIsScrolling } from '@haensl/hooks';
const UserScrollTracker = () => {
const isScrolling = useIsScrolling();
return (
<span>The user is currently { isScrolling ? '' : 'not' } scrolling</span>
);
};
→ Codepen example
useOnScroll(fn, [el = window])
Subscribes to scroll
events on the given element el
(default: window
). The callback function fn
is passed the Event
. Please check the example below as well as the Codepen example.
Example
import React, { useState } from 'react';
import { useOnScroll } from '@haensl/hooks';
const WindowScrollTracker = () => {
const [windowScroll, setWindowScroll] = useState(0);
useOnScroll(() => {
setWindowScroll(window.scrollY);
});
return (
<div className="WindowScrollTracker">
<span>Window has scrolled down</span>
<span>{ windowScroll }px</span>
</div>
);
};
→ Codepen example
useWindowScroll([debounceMs = 25])
Returns an object (null
if there is no window
) with properties x
and y
reflecting the the scroll position of the window
or document
. Scroll position updates are by default debounced by 25 milliseconds. This debounce interval can be customized via the optional debounceMs
argument. Please check the example below as well as the Codepen example.
Example
import React, { useState } from 'react';
import { useWindowScroll } from '@haensl/hooks';
const windowScrollTracker = () => {
const windowScroll = useWindowScroll();
if (!windowScroll) {
return (
<div className="WindowScrollTracker">
no scroll poistion
</div>
);
}
return (
<div className="WindowScrollTracker">
<span>Scroll x: {windowScroll.x}</span>
<span>Scroll y: {windowScroll.y}</span>
</div>
);
};
→ Codepen example
useWindowSize([debounceMs = 25])
Returns an object (initially null
) with properties width
and height
reflecting the innerWidth
and innerHeight
of the window
object. Size updates are by default debounced by 25 milliseconds. This debounce interval can be customized via the optional debounceMs
argument. Please check the example below as well as the Codepen example.
Example
import React, { useState } from 'react';
import { useWindowSize } from '@haensl/hooks';
const WindowSizeTracker = () => {
const windowSize = useWindowSize();
if (!windowSize) {
return (
<div className="WindowSizeTracker">
<span>No window size</span>
</div>
);
}
return (
<div className="WindowSizeTracker">
<span>Window Size:</span>
<span>width: { windowSize.width }px</span>
<span>height: { windowSize.height }px</span>
</div>
);
};