react-responsive-next v0.8.2

Project Idea

Add a simple to use tool to detect user media and then serve content adapted to the browser size and the device. It's based on the react-responsive-redux project but without using the redux.

Browser Support

Chrome	Internet Explorer	Edge	Safari	Firefox
Yes	10+	Yes	9+	Yes

How does it work

react-responsive-next combines several pieces together to detect the device and the resolution:

1. The User-Agent string is sniffed to get a reasonable guess of the client's screen size
2. Detected size is being passed over HOC component to the react-responsive-next HOC component through Next.js page then you can use helper components to differentiate content on a specific media.
3. When browser is running - react-responsive is being used to detect more accurate media info by css media queries. Detected size is being stored in a session cookie.
4. On the page reload value from cookie is being used to render appropriate content on the server side.

Installation

Install with or yarn:

yarn add https://github.com/absolvent/react-responsive-next.git

Usage

To use react-responsive-next you need to do the following:

1. Import ReactResponsiveConnect HOC component from react-responsive-next
2. Wrap your Next.js page component with ReactResponsiveConnect
3. Use helper components Show or Hide to differentiate the content

ES6 Example

import React from 'react';
import { ReactResponsiveConnect, Show, Hide } from 'react-responsive-next';

class IndexPage extends React.PureComponent {

  render() {
    return (
      <div>
        <Show on={'sm'}>
          <div>
            Show content only on small screen
          </div>
        </Show>
        <Hide on={'md'}>
          <div>
            Hide content only for medium screens
          </div>
        </Hide>
      </div>
    );
  }
}

export default ReactResponsiveConnect(IndexPage);

Components can receive device alias that is passed by props for example: <Show on={'sm'}>

But you can also define range by passing props from and to for example: <Show from={'sm'} to={'md'}>

Default config

By default below config is being used with defined named ranges as sm (small), md (medium), lg (large) which can be used in Show/Hide components.

Alias	Range	Device mapping
sm	0 - 767px	phone
md	768px - 1239px	tablet / car
lg	1240px - ∞	desktop / tv / bot / undefined

Using the customConfig

import React from 'react';
import { ReactResponsiveConnect, Show, Hide } from 'react-responsive-next';

ReactResponsiveConnect.customConfig = {
  breakPoints: {
    sm: { to: 500 },
    md: { from: 501, to: 1279 },
    lg: { from: 1280 },
  },
  devicesToBreakPoints: {
    phone: 'sm',
    tablet: 'md',
    car: 'md',
    desktop: 'lg',
    tv: 'lg',
    bot: 'lg',
    undefined: 'lg',
  },
};

class IndexPage extends React.PureComponent {

  render() {
    return (
      ...
    );
  }
}

export default ReactResponsiveConnect(IndexPage);

Legacy components

WARNING: Previously available predefined components won't work correctly with a customConfig. They are deprecated and should be replaced with a Show components

List of deprecated components and proposed replacements:

Legacy component		New component
<PhoneScreen>	->	<Show on={'sm'}>
<TabletScreen>	->	<Show on={'md'}>
<DesktopAndUpScreen>	->	<Show on={'lg'}>
<PhoneAndTabletScreen>	->	<Show to={'md'}>
<TabletAndUpScreen>	->	<Show from={'md'}>