Header Animation

header-anim.js

import { useEffect } from 'react';
import PropTypes from 'prop-types';

//  Animating Header

const noop = () => {};

const HeaderAnim = ({ onHide, onShow, active }) => {
	if (!active || !process.browser) {
		return null;
	}

	/*  eslint-disable no-undef */

	const hideHeader = e => {
		if (document.scrollingElement && document.scrollingElement.scrollTop > 200) {
			setTimeout(() => {
				const header = document.querySelector('header');
				if (header) {
					header.style.transform = 'translateY(-100%)';
					onHide(e);
				}
			}, 1500);
		}
	};

	const showHeader = e => {
		const header = document.querySelector('header');
		if (header) {
			header.style.transform = '';
			onShow(e);
		}
	};

	useEffect(() => {
		document.addEventListener('touchstart', showHeader);
		document.addEventListener('touchend', hideHeader);
		return () => {
			document.removeEventListener('touchstart', showHeader);
			document.removeEventListener('touchend', hideHeader);
		};
	}, []);

	/*  eslint-enable no-undef */

	return null;
};

HeaderAnim.propTypes = {
	onShow: PropTypes.func,
	onHide: PropTypes.func,
	active: PropTypes.bool,
};

HeaderAnim.defaultProps = {
	onShow: noop,
	onHide: noop,
	active: false,
};

export default HeaderAnim;