cerebral-module-useragent

cerebral-module-useragent

A Cerebral module for everything user agent.

Concept

The useragent module puts information about the browser into your model, and it also updates this information when the size of the browser changes etc.

• UA parser: browser and device
• Window: size & orientation
• Media queries
• Feature detection
• Internet connectivity

Install

This project is still in alpha. To test alpha version check instructions in monorepo.

Setup

import {Controller} from 'cerebral'
import Useragent from 'cerebral-module-useragent'

const controller = Controller({
  modules: {
    useragent: Useragent({
      // Use CSS media queries to determine
      // custom sizes available in your model.
      // They will be toggle between true/false in your
      // model
      media: {
        small: '(min-width: 600px)',
        medium: '(min-width: 1024px)',
        large: '(min-width: 1440px)',
        portrait: '(orientation: portrait)'
      },

      // store all feature tests in model
      feature: true,

      parse: {
        // parse useragent.browser from ua string
        browser: true,
        // parse useragent.device from ua string
        device: true
      },

      // check the docs at: https://github.com/HubSpot/offline#advanced
      offline: {
        checkOnLoad: false,
        interceptRequests: true,
        reconnect: {
          initialDelay: 3,
          delay: 1.5
        },
        requests: false
      },

      // update window size on resize
      window: true
    })
  }
})

Grabbing details from useragent

The useragent module will populate your model on the given namespace. All you need to do in your view layer is to grab whatever data you need from it, for example media:

export default connect({
  media: 'useragent.media.*'
}, ...)