MobileComponent

index.tsx

import React, { useEffect, useState } from 'react';
import { isMobile } from 'lib/utils/UiUtils';

// Dynamic component which rendered a different child depending on mobile vs. desktop. 
// Will re-render upon resize state change.
export default MobileComponent = ({ component: Component, ...props }) => {
    const [currIsMobile, setIsMobile] = useState(isMobile());

    useEffect(() => {
        window.addEventListener('resize', (e) => {
            let _isMobile = isMobile();
            if (currIsMobile != _isMobile) {
                setIsMobile(_isMobile)
            }
        });
    })

    if (currIsMobile) {
        return <props.mobile {...props} />
    } else {
        return <props.normal {...props} />
    }
};