25 lines
703 B
TypeScript
25 lines
703 B
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useTimeout } from '@mantine/hooks';
|
|
|
|
export const useHideScrollbar = (timeout: number) => {
|
|
const [hideScrollbar, setHideScrollbar] = useState(false);
|
|
const { start, clear } = useTimeout(() => setHideScrollbar(true), timeout);
|
|
|
|
// Automatically hide the scrollbar after the timeout duration
|
|
useEffect(() => {
|
|
start();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
const hideScrollbarElementProps = {
|
|
onMouseEnter: () => {
|
|
setHideScrollbar(false);
|
|
clear();
|
|
},
|
|
onMouseLeave: () => {
|
|
start();
|
|
},
|
|
};
|
|
|
|
return { hideScrollbarElementProps, isScrollbarHidden: hideScrollbar };
|
|
};
|