1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
6x
6x
 
6x
 
6x
 
 
 
 
 
 
3x
 
import type { ReactElement } from 'react';
import useWindowResize from '@/hooks/useWidowResize';
 
type Props = {
    children: ReactElement | ReactElement[];
    hideOnDesktop?: boolean;
    hideOnTablet?: boolean;
    hideOnMobile?: boolean;
};
 
/**
 * @example
 *     <VisibilityManager hideOnDesktop={true}>
 *
 * @param {boolean} hideOnDesktop - If true, the component will be hidden on desktop
 * @param {boolean} hideOnTablet - If true, the component will be hidden on tablet
 * @param {boolean} hideOnMobile - If true, the component will be hidden on mobile
 * @returns {ReactElement | null}
 */
const VisibilityManager = (props: Props): ReactElement | null => {
    const { children, hideOnDesktop, hideOnTablet, hideOnMobile } = props;
    const { isMobile, isDesktop, isTablet } = useWindowResize();
 
    const hideBecauseOfWidth = (hideOnDesktop && isDesktop) || (hideOnTablet && isTablet) || (hideOnMobile && isMobile);
 
    Iif (hideBecauseOfWidth) {
        return null;
    }
 
    return <>{children}</>;
};
 
export default VisibilityManager;