react hooks helpers
A collection of utility hooks to problems I've solved over the years.
- useAsyncScript
- useBreakpoint
- useComposedRefs
- useControlledReducer
- useOutsideClick
- usePrevious
- useRect
- useSubscription
- useWindowWidth
useAsyncScript
- A stateful hook for asynchronously loading 3rd party scripts in the browser. For example reCAPTCHA or google maps.
Example:
const url = 'https://example.com/?default=true';
export function AsyncScriptExample(): JSX.Element | null {
const { loading, done } = useAsyncScript(url);
if (loading) {
return <>Loading...</>;
}
if (done) {
return <>Script complete</>;
}
if (error) {
return <>Script errored</>;
}
return null;
}
useBreakpoint
- A hook that returns the current breakpoint according to the browser's window size.
Example:
export function BreakpointExample(){
const breakpoint = useBreakpoint();
return (
<div>
<div>{`Current breakpoint is: ${breakpoint}`}</div>
</div>
);
}
useComposedRefs
- A hook to combine multiple instances of a ref into 1 instance to pass to an element.
Example:
const ForwardedRefComponent = forwardRef<HTMLElement, PropsWithChildren<{}>>(
(props, forwardedRef) => {
const internalRef = useRef<HTMLDivElement | null>(null);
const ref = useComposedRefs(internalRef, forwardedRef);
return (
<div ref={ref}>
{props.children}
</div>
);
}
);
useControlledReducer
TODO
useOutsideClick
- A hook that will execute a callback when a click occurs outside of an element.
Example:
function OutsideClickExample(){
const callback = (): void => {
alert('Clicked outside of the button');
};
const ref = useOutsideClick(callback);
return (
<button ref={ref}>Click outside of me</button>
);
}
usePrevious
- A hook that will keep track of the previous state of a stateful value.
Example:
export function PreviousStateExample() {
const [count, setCount] = useState(0);
const previousState = usePrevious(count);
function increaseCount() {
setCount(prevState => prevState + 1);
}
function decreaseCount() {
setCount(prevState => {
const nextState = prevState - 1;
return nextState < 0 ? 0 : nextState;
});
}
return (
<div>
<button onClick={increaseCount}>Increase</button>
<button onClick={decreaseCount}>Decrease</button>
<div>
{`Counter: ${count}`}
<div>{`Previous count: ${previousState}`}</div>
</div>
</div>
);
}
useRect
- A hook that returns the current DOMRect measurements for a DOM element
Example:
function DOMRectExample(){
const ref = useRef<HTMLDivElement | null>(null);
const rect = useRect(ref);
console.log(rect);
return (
<div ref={ref}>
My DOMRect will be tracked
</div>
)
}
useSubscription
TODO
useWindowWidth
- A hook that returns the current width of the browser window.
Example:
export function WindowWidthExample() {
const width = useWindowWidth();
return <div>{`Window's width is ${width}px`}</div>;
}