46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { CSSProperties, useEffect, useState } from 'react';
|
|
|
|
export const useFixedButtonPosition = () => {
|
|
const [buttonStyle, setButtonStyle] = useState<CSSProperties | undefined>();
|
|
|
|
const updateButtonPosition = () => {
|
|
const viewport = window.visualViewport;
|
|
const viewportHeight = viewport?.height;
|
|
const viewportOffsetTop = viewport?.offsetTop ?? 0;
|
|
|
|
if (viewportHeight && viewportHeight < window.innerHeight) {
|
|
setButtonStyle({ bottom: `${window.innerHeight - viewportHeight - viewportOffsetTop + 15}px` });
|
|
} else {
|
|
setButtonStyle(undefined);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const handleResize = () => {
|
|
updateButtonPosition();
|
|
};
|
|
|
|
visualViewport?.addEventListener('resize', handleResize);
|
|
window.addEventListener('resize', handleResize); // fallback for window resize
|
|
|
|
return () => {
|
|
visualViewport?.removeEventListener('resize', handleResize);
|
|
window.removeEventListener('resize', handleResize);
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
updateButtonPosition();
|
|
};
|
|
|
|
window.addEventListener('scroll', handleScroll);
|
|
|
|
return () => {
|
|
window.removeEventListener('scroll', handleScroll);
|
|
};
|
|
}, []);
|
|
|
|
return buttonStyle;
|
|
};
|