Lock.js

class Lock extends React.Component {
  componentDidMount() {
    this.props.load();
  }
  render() {
    if (this.props.isLocked) return this.props.lockedView;
    return React.Children.only(this.props.children);
  }
}

connect((state, props) => ({
  isLocked: isUserOneOfRoles(state, props.forbid) 
}), { load });


// Usage

<Lock forbid={[ROLES.SOCIAL]} lockedView={<SomeLockedView />}>
  <TheSecretPage />
</Lock>


//  If you don't want to repeat the lock you can configure it at a higher level

class ConfiguredLock extend React.Component {
  render() {
    return (
      <Lock forbid={[ROLES.SOCIAL} lockedView={<SomeLockedView />}>
        {this.props.children}
      </Lock>
    );
  }
}

// Now if you want to lock on a specific role and fall to a specific view you can accordingly without repeatign yourself

<ConfiguredLock>
  <SomePage />
</ConfiguredLock>