README
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.