example of using React context hook for responsive design

1. ResponsiveContext.jsx

import React, { createContext, useState } from 'react';
import PropTypes from 'prop-types';

const mq = 'screen and (max-width: 671px)';

const ResponsiveContext = createContext();

const ResponsiveContextProvider = ({ children }) => {
  const [isMobile, setIsMobile] = useState(window.matchMedia(mq).matches);
  matchMedia(mq).addEventListener('change', e => setIsMobile(e.matches));

  return <ResponsiveContext.Provider value={{ isMobile }}>{children}</ResponsiveContext.Provider>;
};

ResponsiveContextProvider.propTypes = {
  children: PropTypes.node.isRequired
};

export { ResponsiveContext, ResponsiveContextProvider };

2. app.jsx

import React from 'react';
import { ResponsiveContextProvider } from './ResponsiveContext';
import MyComponent from './MyComponent';

const app = () => (
  <ResponsiveContextProvider>
    <MyComponent />
  </ResponsiveContextProvider>    
)

3. MyComponent.jsx

import React, { useContext } from 'react';
import { ResponsiveContext } from './ResponsiveContext';

const MyComponent = () => {
  const { isMobile } = useContext(ResponsiveContext);
  return isMobile
    ? ( <h1>I'm mobile</h1> )
    : ( <h1>I'm desktop</h1> )
}