react-is-responsive

A utility to create responsive components in React.

Usage no npm install needed!

<script type="module">
  import reactIsResponsive from 'https://cdn.skypack.dev/react-is-responsive';
</script>

README

react-is-responsive

npm version Build Status

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.