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(){
 
    if (this.context.os === 'Windows') {
      var downloadLink = 'http://some.url/downloads/App.exe';
    } else if (this.context.os === 'Mac') {
      var downloadLink = 'http://some.url/downloads/App.app';
    } else if (this.context.os === 'Android') {
      var downloadLink = 'https://play.google.com/store/apps/details?id=com.app.some';
    } else if (this.context.os === 'iOS') {
      var downloadLink = 'https://itunes.apple.com/us/app/someapp/id12345678';
    } else {
      var downloadLink = 'http://some.url/downloads/';
    }
 
    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();