React Context

• Engagement Properties - AdBlock and Focus
• Display Properties - Density, Scroll, Width and Height
• Device Properties - Language, OS, Browser and Browser Version

var React = require('react');
var context = require('react-context');

var Component = React.createClass({

  // subscribe to all the contextTypes
  contextTypes: context.subscribe(['os']),

  render() {
    var downloadLink;

    switch (this.state.os) {
      case 'Windows':
        downloadLink = 'http://some.url/downloads/App.exe';
        break;
      case 'Mac':
        downloadLink = 'http://some.url/downloads/App.app';
        break;
      case 'Android':
        downloadLink = 'https://play.google.com/store/apps/details?id=com.app.some';
        break;
      case 'iOS':
        downloadLink = 'https://itunes.apple.com/us/app/someapp/id12345678';
        break;
      default:
        downloadLink = 'http://some.url/downloads/';
        break;
    }

    return <a href={ downloadLink }>Download App</div>
  }
});

Installation & Usage

npm install react-context --save

Wrap Root

Wrap your top-most component with react-context.

var React = require('react');
var context = require('react-context');

var Root = React.createClass({
  render() {
    return <div>Root</div>
  }
});

module.exports = context(Root);

Set Types

Pass it an array of types you want to subscribe to, or call it with no arguments to subscribe to all of them.

// Subscribe to scroll and adBlock
Child.contextTypes = context.subscribe(['scroll', 'adBlock']);

// Subscribe to every context
Child.contextTypes = context.subscribe();