A utility to create responsive components in React.

Usage no npm install needed!

<script type="module">
  import reactIsResponsive from '';



npm version Build Status


yarn add react-is-responsive


import isResponsive, { ResponsiveProvider } from 'react-is-responsive';

// wrap your app with the provider (once)
  <App />
// 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
    Xl: string,
    Lg: string,
    Md: string,
    Sm: string,
    Xs: string


Available here.