Add menuComponent option for custom Menu rendering.

Also added new example that implements react-virtualized to render
a large list of 300 items, with virtualized scrolling for perf.

Author: Craga89

examples/src/app.js

@@ -6,6 +6,7 @@ import Select from 'react-select';
 
 import Contributors from './components/Contributors';
 import CustomComponents from './components/CustomComponents';
+import CustomMenuComponent from './components/CustomMenuComponent';
 import CustomRender from './components/CustomRender';
 import Multiselect from './components/Multiselect';
 import NumericSelect from './components/NumericSelect';
@@ -19,6 +20,7 @@ ReactDOM.render(
 		<NumericSelect label="Numeric Values" />
 		<CustomRender label="Custom Render Methods"/>
 		<CustomComponents label="Custom Placeholder, Option and Value Components" />
+		<CustomMenuComponent label="Custom Menu Component" />
 		{/*
 		<SelectedValuesField label="Option Creation (tags mode)" options={FLAVOURS} allowCreate hint="Enter a value that's NOT in the list, then hit return" />
 		*/}

examples/src/components/CustomMenuComponent.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import Select from 'react-select';
+import { VirtualScroll } from 'react-virtualized';
+
+const PEOPLE = require('../data/large');
+
+const InfiniteList = React.createClass({
+	render () {
+		let { children, style, ...props } = this.props;
+
+		return (
+			<VirtualScroll
+				height={200}
+				{...props}
+				rowRenderer={this.renderRow}
+				rowsCount={children.length}
+				rowHeight={35}
+				children={children /* Pass this so the list re-renders when children are hovered/change */}
+			/>
+		);
+	},
+
+	renderRow(index) {
+		let { children } = this.props;
+		return children[index];
+	}
+});
+
+const CustomMenuComponent = React.createClass({
+	propTypes: {
+		hint: React.PropTypes.string,
+		label: React.PropTypes.string,
+	},
+	getInitialState () {
+		return {};
+	},
+	setValue (value) {
+		this.setState({ value });
+	},
+	render () {
+		return (
+			<div className="section">
+				<h3 className="section-heading">{this.props.label}</h3>
+				<Select
+					onChange={this.setValue}
+					menuComponent={InfiniteList}
+					placeholder={`Select one of these ${PEOPLE.length} people...`}
+					options={PEOPLE}
+					value={this.state.value}
+					labelKey="name"
+					valueKey="id"
+				/>
+				<div className="hint">
+					This example implements a custom Menu components to render a an infinite list using a react-list.
+				</div>
+			</div>
+		);
+	}
+});
+
+module.exports = CustomMenuComponent;