react-is-responsive

Install

yarn add react-is-responsive

Usage

import isResponsive, { ResponsiveProvider } from 'react-is-responsive';
 
// wrap your app with the provider (once)
<ResponsiveProvider>
  <App />
</ResponsiveProvider>;
// based on React's createContext API (16.3.0)
 
// decorate your components with the HOC `isResponsive` anywhere in your app
const Foo = () => <div />;
const ResponsiveFoo = isResponsive(Foo);
<ResponsiveFoo />;
// in <ResponsiveFoo />, run console.log(props.responsive)
 
// variations
<ResponsiveProvider />; // desktop, mobile
<ResponsiveProvider simple />; // desktop, tablet, mobile
<ResponsiveProvider detailed />; // xs, sm, md, lg, xl
 
// response
type response = {
  default: {
    isDesktop: boolean,
    isMobile: boolean
  },
  simple: {
    isDesktop: boolean,
    isTablet: boolean,
    isMobile: boolean
  },
  detailed: {
    isXl: boolean,
    isLg: boolean,
    isMd: boolean,
    isSm: boolean,
    isXs: boolean
  }
};
 
// to customize the name of the passed prop, default = `responsive`
<ResponsiveProvider propName="foo" />
 
// by default the response is aggregated under the `responsive` prop
<ResponsiveProvider spread />;
// allows for this.props.isDesktop, this.props.isMobile, etc
// instead of this.props.responsive.isDesktop, this.props.responsive.isMobile, etc
 
// if you don't want to listen to media query changes (will only run once)
<ResponsiveProvider once />;
 
// to override default queries
<ResponsiveProvider
  queries={{
    Xl: string,
    Lg: string,
    Md: string,
    Sm: string,
    Xs: string
  }}
/>;

Example

Available here.