@vovikilelik/use-html/src/use-html.js

Hook and utils for DOM manipulations

import { useEffect, useLayoutEffect, useRef } from 'react';
import { addAttributes } from '@vovikilelik/html-js';


const _multiContext = (callbackList) => {
	return (current) => {
		const destructorList = callbackList.map(c => c(current));

		return () => destructorList.forEach(d => typeof d === 'function' && d());
	};
};

export const useHtml = (ref, callbackOrArray, deps = [callbackOrArray]) => {
	useEffect(() => {
		const { current } = ref;

		if (current) {
			const callback = Array.isArray(callbackOrArray)
				? _multiContext(callbackOrArray)
				: callbackOrArray;

			return callback(current);
		}
	}, [ref.current, ...deps]);
};

export const useHtmlRef = (...args) => {
	const elementRef = useRef(null);

	useHtml(elementRef, ...args);
	
	return elementRef;
};

export const useLayoutHtml = (ref, callbackOrArray, deps = [callbackOrArray]) => {
	useLayoutEffect(() => {
		const { current } = ref;

		if (current) {
			const callback = Array.isArray(callbackOrArray)
				? _multiContext(callbackOrArray)
				: callbackOrArray;

			return callback(current);
		}
	}, [ref.current, ...deps]);
};

export const useLayoutHtmlRef = (...args) => {
	const elementRef = useRef(null);

	useLayoutHtml(elementRef, ...args);

	return elementRef;
};

export const useHtmlAttributes = (ref, attributes, deps = [attributes]) => {
	useEffect(() => {
		const { current } = ref;

		if (current) {
			addAttributes(current, attributes);
		}
	}, [ref.current, ...deps]);
};

export const useHtmlAttributesRef = (...args) => {
	const elementRef = useRef(null);

	useHtmlAttributes(elementRef, ...args);

	return elementRef;
};