How to use the uno-react.useResolutionSwitch function in uno-react

exports.NavBar = function (props) {
    var classes = useStyles({});
    var isMobileView = uno_react_1.useResolutionSwitch(outerWidth, timeout)[0];
    var title = props.title, logo = props.logo, drawerOpen = props.drawerOpen, setDrawerOpen = props.setDrawerOpen;
    var handleDrawerOpen = function (e) {
        e.preventDefault();
        setDrawerOpen(!drawerOpen);
    };
    return (React.createElement(AppBar_1.default, { position: 'absolute', color: 'primary' },
        React.createElement(Toolbar_1.default, null,
            React.createElement(Grid_1.default, { container: true, direction: 'row', item: true, xs: 12 },
                React.createElement(Grid_1.default, { item: true, xs: 6, container: true, direction: 'row', justify: 'flex-start', alignItems: 'center' },
                    isMobileView ?
                        (React.createElement(IconButton_1.default, { color: 'inherit', "aria-label": 'Open drawer', onClick: handleDrawerOpen },
                            React.createElement(Menu_1.default, null)))
                        :
                            React.createElement("img", { src: logo, className: classes.logo }),
                    React.createElement(Typography_1.default, { color: 'textSecondary', variant: 'h5' }, title)),
                React.createElement(Grid_1.default, { xs: 6, item: true, container: true, direction: 'row', justify: 'flex-end', alignItems: 'center' }, props.children)))));

export const NavBar = props => {
    const classes = useStyles({});
    const [isMobileView] = useResolutionSwitch(outerWidth, timeout);
    const { title, logo, drawerOpen, setDrawerOpen } = props;

    const handleDrawerOpen = (e: React.MouseEvent) => {
        e.preventDefault();
        setDrawerOpen(!drawerOpen);
    };

    return (
        
            
                
                    
                        {isMobileView ? (

export const GridToolbar: React.FunctionComponent = ({ toolbarOptions, gridName, tbTableInstance }: IProps) => {
    const [isMobileResolution] = useResolutionSwitch(outerWidth, timeout);

    return (
        
            <div style="{isMobileResolution">
            {toolbarOptions.customItems &amp;&amp; toolbarOptions.customItems}
            {toolbarOptions.exportButton &amp;&amp; (
                
            )}
            {toolbarOptions.printButton &amp;&amp; (
                </div>

export const Paginator: React.FunctionComponent = ({
    tbTableInstance,
    rowsPerPageOptions,
    advancePagination,
}: IPaginatorProps) => {
    const [isMobileResolution] = useResolutionSwitch(outerWidth, timeout);
    const classes = useStyles({});
    const { state, api } = tbTableInstance;

    if (!state.itemsPerPage) {
        return null;
    }

    const newProps = {
        count: state.filteredRecordCount,
        labelDisplayedRows: message(state.totalRecordCount, state.filteredRecordCount),
        onChangePage: (e: any, page: number) => api.goToPage(page),
        onChangeRowsPerPage: (e: any) => api.updateItemPerPage(Number(e.target.value)),
        page: state.filteredRecordCount > 0 ? state.page : 0,
        rowsPerPage: state.itemsPerPage,
        rowsPerPageOptions: rowsPerPageOptions || [10, 20, 50],
    } as any;

detailComponent,
    } = props;

    const classes = useStyles({});

    const tbTableInstance = useTbTable(columns, dataSource, {
        callbacks: { onError },
        componentName: gridName,
        deps,
        pagination: {
            itemsPerPage: toolbarOptions.itemsPerPage,
        },
        storage,
    });

    const [isMobileResolution] = useResolutionSwitch(mobileBreakpointWidth, timeout);

    if (isMobileResolution) {
        toolbarOptions.SetMobileMode();

        return (