react-is-responsive
Install
yarn add react-is-responsive
Usage
; // 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 appconst Foo = <div />;const ResponsiveFoo = ;<ResponsiveFoo />;// in <ResponsiveFoo />, run console.log(props.responsive) // variations<ResponsiveProvider />; // desktop, mobile<ResponsiveProvider simple />; // desktop, tablet, mobile<ResponsiveProvider detailed />; // xs, sm, md, lg, xl // responsetype 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.