import { MatchQueriesProvider } from 'react-matchqueries';
 
const queries = {
    isMobile: 'screen and (max-width: 767px)',
    isTablet: 'screen and (min-width: 768px) and (max-width: 1023px)',
    isDekstopS: 'screen and (min-width: 1024px) and (max-width: 1365px)',
    isDekstop: 'screen and (min-width: 1366px) and (max-width: 1440px)',
    isDekstopL: 'screen and (min-width: 1441px)'
}
 
export const Route = (props) =>  (
  <MatchQueriesProvider queries={queries}>
    <MyApp />
  </MatchQueriesProvider>
);
 

import { MatchQueriesConsumer } from 'react-matchqueries';
 
export const MyApp = () => (
  <MatchQueriesConsumer>
    {({ isDekstopS, isDekstop, isDekstopL, isTablet, isMobile }) => (
      <>
        {(isDekstopS || isDekstop || isDekstopL) && <p>Desktop View</p>}
        {(isTablet || isMobile) && <p>Tablet and Mobile View</p>}
      </>
    )}
  </MatchQueriesConsumer>
);
 
 

import { MatchQueriesProvider } from 'react-matchqueries';
 
const Route = () => {
  const values = {
    width: 300,
    type: 'screen',
  };
 
  return (
    <MatchQueriesProvider values={values}>
      <MyApp />
    </MatchQueriesProvider>
  );
};