React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by koenpunt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

ul {
  border: 1px solid #f00;
  width: 500px;
  height: 300px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overflow-y: scroll;
}

li {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
}

li:nth-child(odd) {
  background: #ddd;
}

li.selected {
  background: #000;
  color: #fff;
}

React

var allFiles = []
var i = 0
while(i < 10000) {
  
  allFiles.push({
    id: i,
    file: 'File ' + i
  })
  ++i
}

var App = React.createClass({

	getInitialState: function() {
  	return {
	    query: '',
      start: 0,
      selected: 0,
      results: []
    }
  },

	componentWillMount: function() {
  	this.updateResults()
  },

	getDefaultProps: function() {
    return {
      files: allFiles,
    	limit: 10
    }
  },

	onSearch: function(query) {
  	this.setState({query: query, start: 0, selected: 0}, this.updateResults)
  },
 
	onKeyDown: function(event) {
    switch(event.key) {
      case 'ArrowDown':
	      this.nextResult()
  	    break
      case 'ArrowUp':
	      this.prevResult()
  	    break
      case 'Enter':
        event.preventDefault()
        break
    }
  },

	nextResult: function() {
  	var selected = this.state.selected + 1
    var start = this.state.start
    if(selected >= start + this.props.limit) {
      ++start
    }
    if(selected + start < this.state.results.length) {
      this.setState({selected: selected, start: start}, this.updateResults)
    }
  },

	prevResult: function() {
  	var selected = this.state.selected - 1
    var start = this.state.start
    if(selected < start) {
      --start
    }
    if(selected + start >= 0) {
      this.setState({selected: selected, start: start}, this.updateResults)
    }
  },

	updateResults: function() {
  	console.log(this.state.query)
		var results = this.props.files.filter(function(file){
    	return file.file.indexOf(this.state.query) > -1
    }, this)

  	this.setState({
    	results: results
    });
  },

  render: function() {
   	var files = this.state.results.slice(this.state.start, this.state.start + this.props.limit)
    return (
    	<div>
      	<Search onSearch={this.onSearch} onKeyDown={this.onKeyDown} />
	    	<List files={files} selected={this.state.selected - this.state.start} />
      </div>
    )
  }
});

var Search = React.createClass({

	getInitialState: function()...