neal-react need media queries

[bySabi]

Hi @dennybritz. We need mediaqueries for Navbar code. I like very much current simple and clean aproach but I cannot put any logic on childrens cause this component are add twice on Navbar render. I create a mediaquery module for this: https://www.npmjs.com/package/react-mediaquery-props

And rewrote Navbar like this.

import React from "react";
import classNames from "classnames";
import { mediaQuery } from "./media-query.jsx";
import { mdUp } from "./bootstrap4-media-query.js";

export const Navbar = mediaQuery(class Navbar extends React.Component {

  static propTypes = {
    brand: React.PropTypes.node.isRequired,
  };

  render() {
    const _className = classNames("navbar neal-navbar", this.props.className);

    const mdUp = this.props.mq.mdUp
      ? { id: 'header-nav', div: '', ul: 'pull-right' }   // medium Up
      : { id: 'mobile-nav', div: 'collapse neal-mobile-nav', ul: '' };

    return (
      <header className="neal-navbar-wrapper">
        <nav className={_className}>
          <div className="container">
            <button className="navbar-toggler hidden-md-up" type="button" data-toggle="collapse"
              data-target="#mobile-nav">
              &#9776;
            </button>
            <a className="navbar-brand hidden-sm-down" href="/">{this.props.brand}</a>
            <div className={`navbar-toggleable-sm ${mdUp.div}`} id={mdUp.id}>
              <ul className={`nav navbar-nav ${mdUp.ul}`}>
                {this.props.children}
              </ul>
            </div>
          </div>
        </nav>
      </header>
    );
  }
}, mdUp);

Tell me is OK for you and I will make a PR.