React Hello World Example with ES6+JSX

A basic Hello World widget with in browser JSX transformed + ES6 support

by Nevin Madhukar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

html,
body {
    margin:0;
    padding:0;
    height:100%;
}

.group_page_header {
    width: 100%;
    height: 20px;
    background-color: #0b97c4;
    position: fixed;
    z-index: 1;
}

.body_clr {
    overflow-y: scroll;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    background-color: #eceff1;
}

.showHeader{
  height:50px;
}

.hideHeader{ 
  height: 30px;
}
.other-stuff{
  height: 1000px;
  display: block;
  margin-top: 20px;
  background-color: yellow;
  width: 100%;
}
.child-stuff{
  display: block;
}

JavaScript 1.7

class InternalGroupsPage extends React.Component {
  constructor() {
    super();
    this.state = {
        hideHeader: false,
      };
  }
	
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll.bind(this));
	};

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll.bind(this));
  };


  getScrollDirection() {
    var currentScrollTop = document.body.scrollTop;
    var isScrollUp = currentScrollTop < this.previousScrollTop;
    this.previousScrollTop = currentScrollTop;
    return isScrollUp;
  }

  shouldComponentUpdate(nextProps, nextState) {
    return this.state.hideHeader !== nextState.hideHeader;
  }

  // scroll down -> show
  // scroll up -> hide
  handleScroll(event) {
      var scrollTop = event.srcElement.body.scrollTop;
      var isScrollUp = this.getScrollDirection();

      if(isScrollUp) {
        this.setState({
          hideHeader: true,
        });
      } else {
        this.setState({
          hideHeader: false,
        });
      }
  };

  render() {
    var headerClassName = this.state.hideHeader ? `group_page_header hideHeader` : `group_page_header showHeader`;
    console.log('classNAme ->', headerClassName)
    return (
      <div className="body_clr">
        <div className={headerClassName}>
        This is the div i want to change the height when scrolling
        </div>
        <div className="other-stuff">
        	<div className="child-stuff"> 
          	Other Stuff
          </div>
          <div className="child-stuff"> 
          	Other Stuff
          </div>
          <div className="child-stuff"> 
          	Other Stuff
          </div>
          <div className="child-stuff"> 
          	Other Stuff
          </div>
          <div className="child-stuff"> 
          	Other Stuff
          </div>
          <div className="child-stuff"> 
          	Other Stuff
          </div>
          <div className="child-stuff"> 
          	Other Stuff
          </div>
          
 ...