Next-mobile-view NPM

NOT WORKING FOR NOW

NextJS Mobile View

Easily switch your Next apps to mobile view

Usage

const Home = () => (
    <div>
        Default view
    </div>
);
Home.MobileView = () => (
    <div>
        Mobile view
    </div>
);
export default Home

Activate On App

You can activate next-page-middleware in your application by adding a few line to the _app.js module.
What is _app.js

import React from 'react'
import withMobileView from 'next-mobile-view'
import App from 'next/app'
class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return <Component {...pageProps} />
  }
}

export default withMobileView(MyApp)

Install

With Npm

npm i next-mobile-view

With Yarn

yarn add next-mobile-view

Props

The props are the same in both functions.

import cx from 'classnames'
const Home = (props) => (
    <div className={cx(props.className, 'home-desktop')}>
        Default view
    </div>
);
Home.MobileView = (props) => (
    <div className={cx(props.className, 'home-mobile')}>
        Mobile view
    </div>
);
Home.getInitialProps = () => {
    return {
        className: 'home' 
    }
};
export default Home