Allow data being shown to be "keyed"

I think this fixes an issue I encountered when a new set of data being shown is the same length as the previous data and the controls broke, specifically
showLoader and actionTriggered were stuck to true

Author: Meberem

README.md

@@ -81,3 +81,4 @@ name | type | description
 **pullDownToRefreshThreshold** | number | minimum distance the user needs to pull down to trigger the refresh, `default=100px`
 **refreshFunction** | function | this function will be called, it should return the fresh data that you want to show the user
 **initialScrollY** | number | set a scroll y position for the component to render with.
+**key** | string | the key for the current data set being shown, used when the same component can show different data sets at different times, `default=undefined`

app/index.js

@@ -82,8 +82,8 @@ export default class InfiniteScroll extends Component {
   }
 
   componentWillReceiveProps(props) {
-    // do nothing when dataLength is unchanged
-    if (this.props.dataLength === props.dataLength) return;
+    // do nothing when dataLength and key are unchanged
+    if (this.props.key === props.key && this.props.dataLength === props.dataLength) return;
 
     // update state when new data was sent in
     this.setState({
@@ -284,5 +284,6 @@ InfiniteScroll.propTypes = {
   pullDownToRefreshThreshold: PropTypes.number,
   refreshFunction: PropTypes.func,
   onScroll: PropTypes.func,
-  dataLength: PropTypes.number.isRequired
+  dataLength: PropTypes.number.isRequired,
+  key: PropTypes.string
 };