Nimble Package Maestros

    react-matchmedia-connect

    0.2.1 • Public • Published

    react-matchmedia-connect

    npm npm version npm downloads

    Check out the demo

    Installation

    npm install react-matchmedia-connect --save

    Usage

    createMatchMediaConnect

    createMatchMediaConnect lets you register a set of media queries. If one of the queries changes, you component will be updated.

    import { createMatchMediaConnect } from 'react-matchmedia-connect';
     
    // Define some media queries and give them a key
    const connect = createMatchMediaConnect({
      isLandscape: '(orientation: landscape)',
      isMin400: '(min-width: 400px)',
      isTablet: '(min-width: 700px), handheld and (orientation: landscape)'
    });

    Then use this connect function throughout your app:

    const Component = ({ isLandscape, isMin400 }) => (
      <div>
        <div>{isLandscape ? 'landscape' : 'portrait'}</div>
        <div>{isMin400 ? 'at least 400' : 'less than 400'}</div>
      </div>
    );
    // This component only needs `isLandscape` and `isMin400`
    const ConnectedComponent = connect(['isLandscape', 'isMin400'])(Component);
    const OtherComponent = ({ isTablet }) => (
      isTablet ? <div>Tablet</div> : <div>No tablet</div>
    );
    // This component only needs `isTablet`
    const OtherConnectedComponent = connect(['isTablet'])(Component);
     

    createResponsiveConnect

    createResponsiveConnect expects a list of breakpoints and creates the respective media queries with createMatchMediaConnect. You'll get a isMin<Size> and isMax<Size> property for each breakpoint as well as a isPortrait and isLandscape property.

    import { createResponsiveConnect } from 'react-matchmedia-connect';
    const connect = createResponsiveConnect({
      xs: 480,
      sm: 768,
      md: 992,
      lg: 1200
    });
    const Component = ({ isMinMd, isMaxMd }) => (
      <div>
        <div>{isMinMd ? 'greater than 992px' : 'less than 992px'}</div>
        <div>{isMaxMd ? 'less than 1200px' : 'greater than 1199px'}</div>
        <div>{isMinMd && isMaxMd ? 'between 992px and 1199px' : 'other'}</div>
      </div>
    );
    // Only connect to `isMinMd` and `isMaxMd`
    const ConnectedComponent = connect(['isMinMd', 'isMaxMd'])(Component);

    API

    createMatchMediaConnect(mediaQueries)

    • mediaQueries (Object): A set of media queries.
    • returns (Function): connect function that connects your components to changes
    const connect = createMatchMediaConnect({
      isLandscape: '(orientation: landscape)',
      isMin400: '(min-width: 400px)'
    });
    connect(properties)
    • properties (Array): An array of properties that your component should receive
    • returns (Function): wrapWithConnect higher order function
    const wrapWithConnect = connect(['isMin400']);
    wrapWithConnect(Component)
    • Component (Component): The component that you want to connect
    • returns (Component): Connected component
    const Component = ({ isMin400 }) => (
      <div>{isMin400 ? 'at least 400' : 'less than 400'}</div>
    );
    // This component only needs `isLandscape` and `isMin400`
    const ConnectedComponent = wrapWithConnect(Component);

    createResponsiveConnect(breakpoints)

    • breakpoints (Object): A set of breakpoints
    • returns (Function): connect function that connects your components to changes

    Default breakpoints:

    const defaultBreakpoints = {
      xs: 480,
      sm: 768,
      md: 992,
      lg: 1200
    };

    Examples

    Run the simple example:

    # Make sure that you've installed the dependencies 
    npm install
    # Move to example directory 
    cd react-matchmedia-connect/examples/simple
    npm install
    npm start

    Tests

    # Make sure that you've installed the dependencies 
    npm install
    # Run tests 
    npm test

    Code Coverage

    # Run code coverage. Results can be found in `./coverage` 
    npm run test:cov

    License

    MIT

    Install

    npm i react-matchmedia-connect

    DownloadsWeekly Downloads

    12,005

    Version

    0.2.1

    License

    MIT

    Last publish

    Collaborators

    • malte-wessel