Commonly used React Hooks

useEventListener.js

import { useRef, useEffect } from 'react';

const useEventListener = (
	eventName,
	eventCallback,
	eventTarget = window,
	eventParams = null
) => {
	const savedCallback = useRef();

	useEffect(() => {
		savedCallback.current = eventCallback;
	}, [eventCallback]);

	useEffect(() => {
		const eventListener = event => savedCallback.current(event);

		eventTarget.addEventListener(eventName, eventListener, eventParams);

		return () => eventTarget.removeEventListener(eventName, eventListener);
	}, [eventName, eventTarget, eventParams]);
};

export default useEventListener;

useIntersectionObserver.js

import { useEffect } from 'react';

const useIntersectionObserver = ({ root, target, onIntersect, threshold = 1.0, rootMargin = '0px' }) => {
	if(!root || !root.current) throw new Error(`IntersectionObserver needs a root (ref)`);
	if(!target || !target.current) throw new Error(`IntersectionObserver needs a target (ref)`);

	if(!onIntersect || typeof onIntersect !== 'function') {
		console.warn('IntersectionObserver will do nothing if onIntersect is not a function.');
		return;
	};

	useEffect(() => {
		const observer = new IntersectionObserver(onIntersect, {
			root: root.current,
			rootMargin,
			threshold
		});

		observer.observe(target.current);
		
		return () => observer.unobserve(target.current);
	})
}

export default useIntersectionObserver;

useKeyboardObserver.js

import { useEffect } from 'react';

const NOOP = () => {};

const useKeyboardObserver = ({
	target,
	onArrowUp = NOOP,
	onArrowDown = NOOP,
	onArrowLeft = NOOP,
	onArrowRight = NOOP,
	onSpacebar = NOOP,
	onBackspace = NOOP,
	onDelete = NOOP,
	onEnter = NOOP,
	onTab = NOOP,
	onEscape = NOOP,
	keyBindings = {},
}) => {
	useEffect(() => {
		target.addEventListener('keyup', observeKeyboardInput, false);

		return () =>
			target.removeEventListener('keyup', observeKeyboardInput, false);
	});

	const observeKeyboardInput = event => {
		if (event.defaultPrevented) return;
		if (target === window && event.target !== document.body) return;

		const {
			onArrowUp,
			onArrowDown,
			onArrowLeft,
			onArrowRight,
			onSpacebar,
			onBackspace,
			onDelete,
			onEnter,
			onTab,
			onEscape,
			keyBindings,
		} = this.props;

		let didEmit = false;

		const keyString = event.key.toString();
		const keyHandler = keyBindings[keyString] || undefined;

		switch (event.key) {
			case 'Up':
			case 'ArrowUp':
				onArrowUp();
				didEmit = true;
				break;

			case 'Down':
			case 'ArrowDown':
				onArrowDown();
				didEmit = true;
				break;

			case 'Left':
			case 'ArrowLeft':
				onArrowLeft();
				didEmit = true;
				break;

			case 'Right':
			case 'ArrowRight':
				onArrowRight();
				didEmit = true;
				break;

			case ' ':
			case 'Spacebar':
				onSpacebar();
				didEmit = true;
				break;

			case 'Backspace':
				onBackspace();
				didEmit = true;
				break;

			case 'Delete':
				onDelete();
				didEmit = true;
				break;

			case 'Enter':
				onEnter();
				didEmit = true;
				break;

			case 'Tab':
				onTab();
				didEmit = true;
				break;

			case 'Escape':
				onEscape();
				didEmit = true;
				break;
			default:
				return;
		}

		if (!didEmit && typeof keyHandler === 'function') {
			keyHandler.call();
		}

		event.preventDefault();
	};
};

export default useKeyboardObserver;