react-is-responsive

    0.0.6 • Public • Published

    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.

    Keywords

    none

    Install

    npm i react-is-responsive

    DownloadsWeekly Downloads

    2

    Version

    0.0.6

    License

    MIT

    Unpacked Size

    12.2 kB

    Total Files

    5

    Last publish

    Collaborators

    • sonaye