Socket
Socket
Sign inDemoInstall

react-mobile-app

Package Overview
Dependencies
6
Maintainers
1
Versions
20
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-mobile-app

Tool which help to create clear mobile architecture in react.js


Version published
Maintainers
1
Weekly downloads
1

Weekly downloads

Readme

Source

react-mobile-app

Tool which helps you to create clear mobile architecture in React.js

If you are building big web application with different components for desktop / mobile + tablet (landscape and portrait), after some time you'll face with lots of problems.

Install

npm i react-mobile-app -S
First, it will be too much code in one place
Secondly, how can you manage it, when user will change device orientation and your application should handle it completely rebuilding frontend?

For clear components-based architecture I propose to use the following approach

import { mobileDetector } from 'react-mobile-app'

import { ComponentDesktop } from './Component.desktop'

import { ComponentMobilePortrait } from './ComponentMobile.portrait'
import { ComponentMobileLandscape } from './ComponentMobile.landscape'

import { ComponentTabletPortrait } from './ComponentTablet.portrait'
import { ComponentTabletLandscape } from './ComponentTablet.landscape'

export const Component = mobileDetector(
  ComponentDesktop,
  [ComponentMobilePortrait, ComponentMobileLandscape],
  [ComponentTabletPortrait, ComponentTabletLandscape]
)

So this's it, ground zero.

How I can use it, extended version

import { mobileDetector } from 'react-mobile-app'

mobileDetector(
  ComponentDesktop,
  [ComponentMobilePortrait?, ComponentMobileLandscape?],
  [ComponentTabletPortrait?, ComponentTabletLandscape?]
)

mobileDetector has only required param mobileDetector(ComponentDesktop) for the desktop view

If you skip any other parameters it will work in the following way

  1. mobileDetector(ComponentDesktop, [ComponentMobilePortrait]) ComponentDesktop for all mobile devices representation, ignore orientation and device type (mobile / tablet)

  2. mobileDetector(ComponentDesktop, [ComponentMobilePortrait, ComponentMobileLandscape]) Both presentations (landscape / portrait) but ignoring device type (mobile / tablet)

  3. mobileDetector(ComponentDesktop, [ComponentMobilePortrait, ComponentMobileLandscape], [ComponentTabletPortrait]) For mobile presented two different orientaion (landscape / portrait) but for the tablet it'll be one view

  4. mobileDetector(ComponentDesktop, [ComponentMobilePortrait, ComponentMobileLandscape], [ComponentTabletPortrait]) Full version - mobile / tablet presented in two orientaions (landscape / portrait)

orientationDetector (dynamic rebuild component by the orientation change)

You can easy detect orientation changes using orientationDetector

import { orientationDetector } from 'react-mobile-app'

orientationDetector(portrait, landscape)

Show component only for specific device

If you have this component only for desktop presentation, it can easy by the onlyDesktop

In any other case it will be () => null

landscape is non-required param

import { onlyForDesktop, onlyForMobile, onlyForTablet } from 'react-mobile-app'

const desktopComponent = onlyForDesktop(desktop)
const mobileComponent = onlyForMobile(portrait, landscape)
const tabletComponent = onlyForTablet(portrait, landscape)

If you want to use low-lvl API

You can find the next helpfull methods under the hood


const isMobile = (): boolean => Boolean

const isTablet = (): boolean => Boolean

const matchMediaQuery = (): MediaQueryList => window.matchMedia('(orientation: landscape)')

const isLandscape = (): boolean => matchMediaQuery().matches

const mobileDetect: MobileDetect = new MobileDetect(navigator.userAgent)

You can import anything what you need


import {
  mobileDetector,
  isMobile,
  isTablet,
  matchMediaQuery,
  isLandscape,
  mobileDetect
} from 'react-mobile-app'

With redux

import { connect } from 'react-redux'
import { mobileDetector } from 'react-mobile-app'

import { action } from './reducer'

import { ComponentDesktop } from './Component.desktop'

import { ComponentMobilePortrait } from './ComponentMobile.portrait'
import { ComponentMobileLandscape } from './ComponentMobile.landscape'

import { ComponentTabletPortrait } from './ComponentTablet.portrait'
import { ComponentTabletLandscape } from './ComponentTablet.landscape'

const mapStateToProps = props => ({ ...props })

const mapDispatchToProps = dispatch => ({
  action: () => dispatch(action())
})

const Component = connect(
  mapStateToProps,
  mapDispatchToProps,
  mobileDetector(
    ComponentDesktop,
    [ComponentMobilePortrait, ComponentMobileLandscape],
    [ComponentTabletPortrait, ComponentTabletLandscape]
  )
)

With React-Storybook

Use Storybook for easy UI development

You can configurate it for different flow on mobile and desktop

import React from 'react'
import { configure } from '@storybook/react'
import { isMobile, isTablet } from 'react-mobile-app'

const desktopContext = () => require.context('../src', true, /\.((?!mobile)|(?!tablet))\..*\.story\.js$/)
const mobileContext = () => require.context('../src', true, /\.mobile\.story\.js$/)
const tabletContext = () => require.context('../src', true, /\.tablet\.story\.js$/)

const calculateContext = () => {
  if (isMobile()) {
    return mobileContext()
  }

  if (isTablet()) {
    tabletContext()
  }

  return desktopContext()
}

const ctx = calculateContext()

function loadStories() {
  ctx.keys().forEach(ctx)
}

configure(loadStories, module)

Then you can easily add specific stories to your filesystem mobile and tablet

May the force be with you!

Keywords

FAQs

Last updated on 27 Nov 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc