Use context in React to propagate global variables (like settings)

babel.js

class User extends React.Component {
  // getChildContext serves as the initializer for our context values
  getChildContext() {
    return {
      favColor: '#f8c483',
      userName: 'James Ipsum'
    }
  }
  
  render() {
    return(
      <div>
        <Usercard />
      </div>
    );
  }
}

// childContextTypes is defined on the context-provider, giving the context values their corresponding type and passing them down the tree 
User.childContextTypes = {
  favColor: React.PropTypes.string,
  userName: React.PropTypes.string
};

class Usercard extends React.Component {
  // Note that the Usercard component makes no use of context
  render() {
    return(
      <div className='usercard'>
        <UserIcon />
        <UserInfo />
      </div>
    );
  }
}

class UserInfo extends React.Component {
  // We can make use of these context values...
  render() {
    return(
      <h2>{this.context.userName}</h2>
    );
  }
}

// By defining corresponding contextTypes on child components down the tree that wish to access them
UserInfo.contextTypes = {
  userName: React.PropTypes.string
};

class UserIcon extends React.Component {
  // Same as above
  render() {
    return(
      <div 
        className='circle' 
        style={{
          backgroundColor: this.context.favColor
        }}></div>
    );
  }
}

// But accessing favColor instead.
UserIcon.contextTypes = {
  favColor: React.PropTypes.string
};

ReactDOM.render(<User />, document.getElementById('app'));

index.html

<div id='app'></div>

style.css

@import url(https://fonts.googleapis.com/css?family=Roboto:100);

h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  margin: 10px;
}

.usercard {
  height: 170px;
  width: 300px;
  border: 1px solid #bdbdbd;
  border-radius: 15px;
}

.circle {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  margin: 10px;
}