diff --git a/README.md b/README.md
index 331931f1..543a79af 100644
--- a/README.md
+++ b/README.md
@@ -36,10 +36,10 @@ $ npm install --save intersection-observer
 Next create a `<List>` and two instance methods as props `children` and `itemRenderer`:
 
 ```jsx
-import React from 'react';
+import React, { Component } from 'react';
 import List from '@researchgate/react-intersection-list';
 
-export default class MyList extends React.Component {
+export default class InfiniteList extends Component {
     itemsRenderer = (items, ref) => (
         <ul className="list" ref={ref}>
             {items}
@@ -49,18 +49,14 @@ export default class MyList extends React.Component {
     itemRenderer = (index, key) => <li key={key}>{index}</li>;
 
     render() {
-        return (
-            <List currentLength={1000} itemsRenderer={this.itemsRenderer}>
-                {this.itemRenderer}
-            </List>
-        );
+        return <List itemCount={1000} itemsRenderer={this.itemsRenderer} renderItem={this.itemRenderer} />;
     }
 }
 ```
 
-Note that `<List>` is a `PureComponent` so it can keep itself from re-rendering. It's highly recommended to pass
-referenced methods for `children` and `itemsRenderer` (in this case instance methods), so that it can successfully
-shallow compare props.
+Note that `<List>` is a `PureComponent` so it can keep itself from re-rendering. It's highly recommended to avoid
+creating new functions for `renderItem` and `itemsRenderer` so that it can successfully shallow compare props on
+re-render.
 
 ## Why React Intersection List?
 
@@ -93,59 +89,65 @@ property isn't found, then `window` will be used as the `root` instead.
 
 The `sentinel` element is by default detached from the list when the current size reaches the available length, unless
 you're using `awaitMore`. In case your list is in memory and you rely on the list for incremental rendering only, the
-default detaching behavior suffices. If you're loading items asynchoronously on-demand, make sure to switch `awaitMore`
-once you reach the total length.
+default detaching behavior suffices. If you're loading more items in an asynchoronous way, make sure you switch
+`awaitMore` once you reach the total length (bottom of the list).
 
-### FAQ
-
-Q: Why am I receiving too many `onIntersection` callbacks
-
-We extend `React.PureComponent`, so IF the parent component re-renders, and the _props_ passed to your `<List />` don't
-hold the same reference anymore, the list re-renders and may accidentally be re-attaching the `sentinel`.
-
-Q: Do I always need to assign the `ref`?
+The prop `itemCount` must be used if the prop `items` is not provided, and viceversa. Calculating the list size is done
+by adding the current size and the page size until the items' length is reached.
 
-Yes, this callback is used to start up the `IntersectionObserver`.
-
-Q: What's the `threshold` value, and why does it need a _unit_?
+### FAQ
 
-The `threshold` value is the amount of space needed before the `sentinel` intersects with the root. The prop is
+<details>
+  <summary>Why am I receiving too many `onIntersection` callbacks</summary>
+  We extend `PureComponent`. That means, if the parent component re-renders and the _props_ passed to your `<List />` don't
+hold the same reference anymore, the list re-renders and we accidentally restart the `IntersectionObserver` of the `Sentinel`.
+</details>
+<br />
+<details>
+  <summary>Do I always need to assign the `ref`?</summary>
+  Yes, the ref callback will be used as the `root` and is forwarded to the `IntersectionObserver` within the `Sentinel`.
+</details>
+<br />
+<details>
+  <summary>What's the `threshold` value, and why does it need a _unit_?</summary>
+  The `threshold` value is the amount of space needed before the `sentinel` intersects with the root. The prop is
 transformed into a valid `rootMargin` property for the `IntersectionObserver`, depending on the `axis` you select. As a
 sidenote, we believe that a percentage unit works best for responsive layouts.
-
-Q: I am getting a console warning when I first load the list
-
-> The sentinel detected a viewport with a bigger size than the size of its items...
-
+</details>
+<br />
+<details>
+  <summary>I am getting a console warning when I first load the list</summary>
+  <blockquote>The sentinel detected a viewport with a bigger size than the size of its items...</blockquote>
 The prop `pageSize` is `10` by default, so make sure you're not falling short on items when you first render the
-component. The idea of an infinite scrolling list is that items overflow the viewport, so that users have the impression
-that there're always more items available.
-
-Q: Why doesn't the list render my updated list element(s)?
-
-The list renders items based on its props. An update somewhere else in your app (or within your list item) might update
+component. The idea of an infinite scrolling list is that items overflow the viewport, so that users have the impression that there're always more items available.
+</details>
+<br />
+<details>
+  <summary>Why doesn't the list render my updated list element(s)?</summary>
+  The list renders items based on its props. An update somewhere else in your app (or within your list item) might update
 your list element(s), but if your list's `currentLength` prop for instance, remains unchanged, the list prevents a
-re-render. Updating the entire infinite list when one of its items has changed is far from optimal. Instead, update your
-list items independently using internal state or something like react-redux's connect().
-
-Q: Are you planning to implement a "virtual list mode" like react-virtualized?
-
-Yes, there's already an [open issue](https://github.com/researchgate/react-intersection-list/issues/2) to implement a
-mode using occlusion culling.
+re-render. Updating the entire infinite list when one of its items has changed is far from optimal. Instead, update each item individually with some form of `connect()` function or observables.
+</details>
+<br />
+<details>
+  <summary>Are you planning to implement a "virtual list mode" like react-virtualized?</summary>
+  Yes, there's already an [open issue](https://github.com/researchgate/react-intersection-list/issues/2) to implement a
+mode using occlusion culling. It will be implemented in a future release. If you can't wait, you could help us out by opening a Pull Request :)
+</details>
 
 ### Props
 
-| property         | type                                                               | default                                        | description                                                                                             |
-| ---------------- | ------------------------------------------------------------------ | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
-| `children`       | `(index: number, key: number) => React.Element`                    | `(index, key) => <div key={key}>{index}</div>` | render function as children;<br />gets call once for each item.                                         |
-| `itemsRenderer`  | `(items: Array(React.Element), ref: HTMLElement) => React.Element` | `(items, ref) => <div ref={ref}>{items}</div>` | render function for the list's<br />root element, often returning a scrollable element.                 |
-| `currentLength`  | `number`                                                           | `0`                                            | item count to render.                                                                                   |
-| `awaitMore`      | `boolean`                                                          |                                                | if true keeps the sentinel from detaching.                                                              |
-| `onIntersection` | `(size: number, pageSize: number) => void`                         |                                                | invoked when the sentinel comes into view.                                                              |
-| `threshold`      | `string`                                                           | `100px`                                        | value in absolute `px` or `%`<br />as spacing before the sentinel hits the edge of the list's viewport. |
-| `axis`           | `string`                                                           | `y`                                            | scroll direction: `y` == vertical and `x` == horizontal                                                 |
-| `pageSize`       | `number`                                                           | `10`                                           | number of items to render each hit.                                                                     |
-| `initialIndex`   | `number`                                                           | `0`                                            | start position of iterator of items.                                                                    |
+| property              | type                                                               | default                                        | description                                                                                             |
+| --------------------- | ------------------------------------------------------------------ | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| `renderItem|children` | `(index: number, key: number) => React.Element`                    | `(index, key) => <div key={key}>{index}</div>` | render function as children or render props;<br />gets call once for each item.                         |
+| `itemsRenderer`       | `(items: Array(React.Element), ref: HTMLElement) => React.Element` | `(items, ref) => <div ref={ref}>{items}</div>` | render function for the list's<br />root element, often returning a scrollable element.                 |
+| `itemCount|items`     | `number | Array (or Iterable Object)`                              | `0`                                            | item count to render.                                                                                   |
+| `awaitMore`           | `boolean`                                                          |                                                | if true keeps the sentinel from detaching.                                                              |
+| `onIntersection`      | `(size: number, pageSize: number) => void`                         |                                                | invoked when the sentinel comes into view.                                                              |
+| `threshold`           | `string`                                                           | `100px`                                        | value in absolute `px` or `%`<br />as spacing before the sentinel hits the edge of the list's viewport. |
+| `axis`                | `string`                                                           | `y`                                            | scroll direction: `y` == vertical and `x` == horizontal                                                 |
+| `pageSize`            | `number`                                                           | `10`                                           | number of items to render each hit.                                                                     |
+| `initialIndex`        | `number`                                                           | `0`                                            | start position of iterator of items.                                                                    |
 
 ### Examples
 
diff --git a/docs/docs/components/AsyncList/index.js b/docs/docs/components/AsyncList/index.js
index 730b62b7..435c8169 100644
--- a/docs/docs/components/AsyncList/index.js
+++ b/docs/docs/components/AsyncList/index.js
@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { Component } from 'react';
 import List from '../../../../src';
 
 const PAGE_SIZE = 20;
 
-export default class extends React.Component {
+export default class AsyncList extends Component {
     state = {
         awaitMore: true,
         isLoading: false,
@@ -89,12 +89,11 @@ export default class extends React.Component {
                 <List
                     awaitMore={this.state.awaitMore}
                     itemsRenderer={this.renderItems}
-                    currentLength={this.state.repos.length}
+                    itemCount={this.state.repos.length}
                     onIntersection={this.handleLoadMore}
                     pageSize={PAGE_SIZE}
-                >
-                    {this.renderItem}
-                </List>
+                    renderItem={this.renderItem}
+                />
             </div>
         );
     }
diff --git a/docs/docs/components/Axis/index.js b/docs/docs/components/Axis/index.js
index 4cbbfc5b..cda306f7 100644
--- a/docs/docs/components/Axis/index.js
+++ b/docs/docs/components/Axis/index.js
@@ -8,4 +8,6 @@ const itemsRenderer = (items, ref) => (
 );
 
 // eslint-disable-next-line react/no-multi-comp
-export default () => <List axis="x" currentLength={Infinity} itemsRenderer={itemsRenderer} pageSize={40} />;
+const Axis = () => <List axis="x" itemCount={Infinity} itemsRenderer={itemsRenderer} pageSize={40} />;
+
+export default Axis;
diff --git a/docs/docs/components/InfiniteList/index.js b/docs/docs/components/InfiniteList/index.js
index 0ce2a6bc..f92a015e 100644
--- a/docs/docs/components/InfiniteList/index.js
+++ b/docs/docs/components/InfiniteList/index.js
@@ -8,4 +8,6 @@ const itemsRenderer = (items, ref) => (
 );
 
 // eslint-disable-next-line react/no-multi-comp
-export default () => <List currentLength={Infinity} itemsRenderer={itemsRenderer} pageSize={40} />;
+const InfiniteList = () => <List itemCount={Infinity} itemsRenderer={itemsRenderer} pageSize={40} />;
+
+export default InfiniteList;
diff --git a/docs/recipes/README.md b/docs/recipes/README.md
index df3e2488..a48200e3 100644
--- a/docs/recipes/README.md
+++ b/docs/recipes/README.md
@@ -2,7 +2,10 @@
 
 ### Asynchonous Repo List
 
-When the sentinel comes into view, you can use the callback to load data, create the next items, and attach them. For this case we're loading Github repositories with pagination. We assume that we don't know the total length and we'll want to keep fetching until the (unknown) end of the list. The solution here is to pass the prop `awaitMore:bool = true`, so that the sentinel awaits for more items.
+When the sentinel comes into view, you can use the callback to load data, create the next items, and attach them. For
+this case we're loading Github repositories with pagination. We assume that we don't know the total length and we'll
+want to keep fetching until the (unknown) end of the list. The solution here is to pass the prop `awaitMore:bool =
+true`, so that the sentinel awaits for more items.
 
 ```jsx
 import React from 'react';
@@ -18,7 +21,7 @@ export default class extends React.Component {
         repos: [],
     };
 
-    feedList = (repos) => {
+    feedList = repos => {
         this.setState({
             awaitMore: repos.length > 0,
             isLoading: false,
@@ -36,7 +39,7 @@ export default class extends React.Component {
 
         const url = 'https://api.github.com/users/researchgate/repos';
         const qs = `?type=public&per_page=${PAGE_SIZE}&page=${currentPage}`;
-        
+
         fetch(url + qs)
             .then(response => response.json())
             .then(this.feedList)
@@ -67,19 +70,19 @@ export default class extends React.Component {
                 <List
                     awaitMore={this.state.awaitMore}
                     itemsRenderer={this.renderItems}
-                    currentLength={this.state.repos.length}
+                    itemCount={this.state.repos.length}
                     onIntersection={this.handleLoadMore}
                     pageSize={PAGE_SIZE}
-                >
-                    {this.renderItem}
-                </List>
+                    renderItem={this.renderItem}
+                />
             </div>
         );
     }
 }
 ```
 
-If the total amount of items are prefetched and available, we won't need `awaitMore` and the `pageSize` will be used to paginate results until we reach the bottom of the list.
+If the total amount of items are prefetched and available, we won't need `awaitMore` and the `pageSize` will be used to
+paginate results until we reach the bottom of the list.
 
 ### Infinite Synchronous List
 
@@ -87,11 +90,7 @@ If the total amount of items are prefetched and available, we won't need `awaitM
 import React from 'react';
 import List from '@researchgate/react-intersection-list';
 
-export default () => (
-    <List currentLength={Infinity}>
-        {(index, key) => <div key={key}>{index}</div>}
-    </List>
-);
+export default () => <List itemCount={Infinity}>{(index, key) => <div key={key}>{index}</div>}</List>;
 ```
 
 ### Can I submit a new recipe?
@@ -99,11 +98,13 @@ export default () => (
 Yes, of course!
 
 1. Fork the code repo.
-2. Create your new recipe in the correct subfolder within `./docs/docs/components/` (create a new folder if it doesn't already exist).
+2. Create your new recipe in the correct subfolder within `./docs/docs/components/` (create a new folder if it doesn't
+   already exist).
 3. Make sure you have included a README as well as your source file.
 4. Submit a PR.
 
-_If you haven't yet, please read our [contribution guidelines](https://github.com/researchgate/react-intersection-list/blob/master/.github/CONTRIBUTING.md)._
+_If you haven't yet, please read our
+[contribution guidelines](https://github.com/researchgate/react-intersection-list/blob/master/.github/CONTRIBUTING.md)._
 
 ### What license are the recipes released under?
 
@@ -111,4 +112,5 @@ By default, all newly submitted code is licensed under the MIT license.
 
 ### How else can I contribute?
 
-Recipes don't always have to be code - great documentation, tutorials, general tips and even general improvements to our examples folder are greatly appreciated.
\ No newline at end of file
+Recipes don't always have to be code - great documentation, tutorials, general tips and even general improvements to our
+examples folder are greatly appreciated.
diff --git a/package.json b/package.json
index 406ad588..27885b0f 100644
--- a/package.json
+++ b/package.json
@@ -34,35 +34,23 @@
     "lint-staged": "^7.0.0",
     "prettier": "^1.8.2",
     "raf": "^3.4.0",
-    "react": "^16.1.1",
-    "react-dom": "^16.1.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
     "react-test-renderer": "^16.1.1",
     "rimraf": "^2.6.1",
     "standard-version": "^4.2.0",
-    "style-loader": "^0.21.0",
+    "style-loader": "^0.19.0",
+    "typescript": "^2.6.2",
     "validate-commit-msg": "^2.14.0",
     "whatwg-fetch": "^2.0.3"
   },
-  "files": [
-    "lib"
-  ],
+  "files": ["lib", "types/index.d.ts"],
+  "types": "types/index.d.ts",
   "homepage": "https://github.com/researchgate/react-intersection-list#readme",
-  "keywords": [
-    "Intersection",
-    "Observer",
-    "react",
-    "component",
-    "list",
-    "infinite",
-    "scrollable",
-    "researchgate"
-  ],
+  "keywords": ["Intersection", "Observer", "react", "component", "list", "infinite", "scrollable", "researchgate"],
   "license": "MIT",
   "lint-staged": {
-    "{src,docs/docs}/**/*.js": [
-      "eslint --fix",
-      "git add"
-    ]
+    "{src,docs/docs}/**/*.js": ["eslint --fix", "git add"]
   },
   "main": "lib/js/index.js",
   "module": "lib/es/index.js",
@@ -76,24 +64,22 @@
   },
   "jest": {
     "rootDir": "src",
-    "testMatch": [
-      "**/__tests__/**/*.spec.js"
-    ],
-    "setupFiles": [
-      "raf/polyfill"
-    ]
+    "testMatch": ["**/__tests__/**/*.spec.js"],
+    "setupFiles": ["raf/polyfill"]
   },
   "scripts": {
     "build": "npm run build:js && npm run build:es",
-    "build:js": "cross-env BABEL_ENV=production BABEL_OUTPUT=cjs babel src --out-dir lib/js --ignore __tests__ --copy-files",
-    "build:es": "cross-env BABEL_ENV=production BABEL_OUTPUT=esm babel src --out-dir lib/es --ignore __tests__ --copy-files",
+    "build:js":
+      "cross-env BABEL_ENV=production BABEL_OUTPUT=cjs babel src --out-dir lib/js --ignore __tests__ --copy-files",
+    "build:es":
+      "cross-env BABEL_ENV=production BABEL_OUTPUT=esm babel src --out-dir lib/es --ignore __tests__ --copy-files",
     "build:storybook": "build-storybook --output-dir docs",
     "create-github-release": "conventional-github-releaser -p angular",
     "clear": "rimraf ./lib",
     "commitmsg": "validate-commit-msg",
     "coverage": "yarn test -- --coverage",
     "format": "eslint --fix {src,docs/docs}/**/*.js",
-    "lint": "eslint {src,docs/docs}/.",
+    "lint": "eslint {src,docs/docs}/. && tsc --project types",
     "precommit": "yarn lint-staged && yarn test",
     "prepare": "yarn clear && yarn build",
     "prepublishOnly": "yarn test",
diff --git a/src/List.js b/src/List.js
index 73f6658b..fd650ac1 100644
--- a/src/List.js
+++ b/src/List.js
@@ -1,28 +1,36 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import warning from 'warning';
 import Sentinel from './Sentinel';
 
 const AXIS_CSS_MAP = { x: 'overflowX', y: 'overflowY' };
 
-export default class List extends React.PureComponent {
+export default class List extends PureComponent {
     static propTypes = {
         awaitMore: PropTypes.bool,
         axis: PropTypes.oneOf(['x', 'y']),
         children: PropTypes.func,
         initialIndex: PropTypes.number,
-        currentLength: PropTypes.number,
+        items(props, propName) {
+            const object = props[propName];
+            if (object != null && !(Array.isArray(object) || typeof object[Symbol.iterator] === 'function')) {
+                return new Error(
+                    `\`${propName}\` must be of type Array or a native type implementing the iterable interface`,
+                );
+            }
+            return undefined;
+        },
+        itemCount: PropTypes.number,
         itemsRenderer: PropTypes.func,
         onIntersection: PropTypes.func,
         pageSize: PropTypes.number,
+        renderItem: PropTypes.func,
         threshold: PropTypes.string,
     };
 
     static defaultProps = {
         axis: 'y',
-        children: (index, key) => <div key={key}>{index}</div>,
         initialIndex: 0,
-        currentLength: 0,
         itemsRenderer: (items, ref) => <div ref={ref}>{items}</div>,
         pageSize: 10,
         threshold: '100px',
@@ -32,10 +40,10 @@ export default class List extends React.PureComponent {
         super(props);
 
         this.state = {
-            size: this.computeSize(props.pageSize, props.currentLength),
+            size: this.computeSize(props.pageSize, this.getItemCount(props)),
         };
 
-        this.checkedForIntersection = this.state.size === 0;
+        this.prematureIntersectionChecked = this.state.size === 0;
     }
 
     setRef = callback => {
@@ -50,11 +58,11 @@ export default class List extends React.PureComponent {
     };
 
     handleUpdate = ({ isIntersecting }) => {
-        const { awaitMore, currentLength, onIntersection, pageSize } = this.props;
+        const { awaitMore, onIntersection, pageSize } = this.props;
         const { size } = this.state;
 
-        if (!this.checkedForIntersection) {
-            this.checkedForIntersection = true;
+        if (!this.prematureIntersectionChecked) {
+            this.prematureIntersectionChecked = true;
             warning(
                 !isIntersecting,
                 'ReactIntersectionList: the sentinel detected a viewport with a bigger size than the size of its items. ' +
@@ -64,9 +72,10 @@ export default class List extends React.PureComponent {
         }
 
         if (isIntersecting) {
-            const nextSize = this.computeSize(size + pageSize, currentLength);
-            this.setState({ size: nextSize });
-
+            const nextSize = this.computeSize(size + pageSize, this.getItemCount(this.props));
+            if (this.state.size !== nextSize) {
+                this.setState({ size: nextSize });
+            }
             if (onIntersection && (!awaitMore || this.awaitIntersection)) {
                 if (this.awaitIntersection) {
                     this.awaitIntersection = false;
@@ -76,21 +85,56 @@ export default class List extends React.PureComponent {
         }
     };
 
-    computeSize(pageSize, currentLength) {
-        return Math.min(pageSize, currentLength);
+    computeSize(pageSize, itemCount) {
+        return Math.min(pageSize, itemCount);
+    }
+
+    getItemCount({ itemCount, items }) {
+        const hasItemCount = typeof itemCount !== 'undefined';
+        const hasItems = typeof items !== 'undefined';
+        const defaultValue = 0;
+
+        warning(
+            !(hasItemCount && hasItems),
+            'ReactIntersectionList: cannot use itemCount and items props at the same time, choose one to determine the number of items to render.',
+        );
+
+        if (hasItemCount) {
+            return itemCount;
+        }
+
+        return hasItems ? items.length || items.size || defaultValue : defaultValue;
+    }
+
+    getItemRenderer() {
+        const { children, renderItem } = this.props;
+        const hasChildren = typeof children !== 'undefined';
+        const hasRender = typeof renderItem !== 'undefined';
+
+        warning(
+            !(hasChildren && hasRender),
+            'ReactIntersectionList: cannot use children and renderItem props as render function at the same time.',
+        );
+
+        if (hasChildren) {
+            return children;
+        }
+
+        return hasRender ? renderItem : (index, key) => <div key={key}>{index}</div>;
     }
 
     renderItems() {
-        const { awaitMore, axis, children, currentLength, initialIndex, itemsRenderer, threshold } = this.props;
+        const { awaitMore, axis, initialIndex, itemsRenderer, threshold } = this.props;
         const { size } = this.state;
+        const itemRenderer = this.getItemRenderer();
         const items = [];
 
         for (let i = 0; i < size; ++i) {
-            items.push(children(initialIndex + i, i));
+            items.push(itemRenderer(initialIndex + i, i));
         }
 
         let sentinel;
-        if (size < currentLength || awaitMore) {
+        if (size < this.getItemCount(this.props) || awaitMore) {
             sentinel = (
                 <Sentinel
                     key="sentinel"
@@ -115,11 +159,11 @@ export default class List extends React.PureComponent {
     }
 
     componentWillReceiveProps({ pageSize, ...rest }) {
-        const { currentLength } = this.props;
-        const nextCurrentLength = rest.currentLength;
+        const itemCount = this.getItemCount(this.props);
+        const nextItemCount = this.getItemCount(rest);
 
-        if (this.props.pageSize !== pageSize || currentLength !== nextCurrentLength) {
-            const nextSize = this.computeSize(this.state.size + pageSize, nextCurrentLength);
+        if (this.props.pageSize !== pageSize || itemCount !== nextItemCount) {
+            const nextSize = this.computeSize(this.state.size + pageSize, nextItemCount);
             this.setState({ size: nextSize });
         }
     }
diff --git a/src/__tests__/List.spec.js b/src/__tests__/List.spec.js
index 584070b2..f6baa44b 100644
--- a/src/__tests__/List.spec.js
+++ b/src/__tests__/List.spec.js
@@ -2,7 +2,7 @@
 import 'intersection-observer';
 import React from 'react';
 import renderer from 'react-test-renderer';
-import List from '../List';
+import List from '../';
 import mockSentinel, { mockCallback } from './mockSentinel';
 
 jest.mock('../Sentinel', () => props => {
@@ -24,14 +24,14 @@ beforeEach(() => {
     }));
 });
 
-test('renders without crashing', () => {
+test('render component with default props', () => {
     createTree();
 });
 
-describe('children', () => {
+describe('render children given pertinent props', () => {
     test('receives correct arguments given default props', () => {
         const spy = jest.fn();
-        createTree({ currentLength: 10, children: spy });
+        createTree({ itemCount: 10, children: spy });
         expect(spy).toHaveBeenCalledTimes(10);
         expect(spy).lastCalledWith(9, 9);
     });
@@ -40,7 +40,7 @@ describe('children', () => {
         const spy = jest.fn();
         createTree({
             initialIndex: 10,
-            currentLength: 30,
+            itemCount: 30,
             pageSize: 15,
             children: spy,
         });
@@ -49,75 +49,125 @@ describe('children', () => {
     });
 });
 
-describe('render items', () => {
+describe('render component given pertinent props', () => {
+    test('pure component avoids unnecessary re-rendering', () => {
+        const props = { pageSize: 5, itemCount: 25 };
+        const tree = createTree(props);
+        const spy = jest.spyOn(tree.getInstance(), 'render');
+        tree.update(<List {...props} />);
+        expect(spy).not.toHaveBeenCalled();
+    });
+
+    test('throw with two different render function props', () => {
+        const spy = global.spyOn(console, 'error');
+        createTree({ children() {}, renderItem() {}, itemCount: 2 });
+        expect(spy.calls.mostRecent().args[0]).toMatchSnapshot();
+    });
+
+    test('render children function', () => {
+        const props = { children() {}, itemCount: 2 };
+        const spy = jest.spyOn(props, 'children');
+        createTree(props);
+        expect(spy).toHaveBeenCalledTimes(2);
+    });
+
+    test('render prop function', () => {
+        const props = { renderItem() {}, itemCount: 2 };
+        const spy = jest.spyOn(props, 'renderItem');
+        createTree(props);
+        expect(spy).toHaveBeenCalledTimes(2);
+    });
+
+    test('throw with both itemCount and items props set', () => {
+        const spy = global.spyOn(console, 'error');
+        createTree({ items: 666 });
+        expect(spy.calls.mostRecent().args[0]).toMatchSnapshot();
+    });
+
+    test('render with items instead of itemCount', () => {
+        const json = createTree({ items: [1, 2] }).toJSON();
+        const children = json.children;
+        expect(children.length).toBe(2);
+    });
+
+    test('render empty items if no prop is given to determine length', () => {
+        const instance = createTree().getInstance();
+        expect(instance.getItemCount({})).toBe(0);
+    });
+
+    test('render with iterable Set', () => {
+        const items = new Set([1, 2, 3]);
+        const json = createTree({ items }).toJSON();
+        const children = json.children;
+        expect(children.length).toBe(3);
+    });
+});
+
+describe('render items given sentinel', () => {
     test('sentinel observes if available items in view', () => {
-        const json = createTree({ currentLength: 10, pageSize: 5 }).toJSON();
+        const json = createTree({ itemCount: 10, pageSize: 5 }).toJSON();
         const children = json.children;
         expect(children.length).toBe(6);
         expect(children[children.length - 1].type).toBe('span');
     });
 
     test('sentinel gone if no items available in view', () => {
-        const json = createTree({ currentLength: 5, pageSize: 5 }).toJSON();
+        const json = createTree({ itemCount: 5, pageSize: 5 }).toJSON();
         const children = json.children;
         expect(children.length).toBe(5);
         expect(children[children.length - 1].type).toBe('div');
     });
 
-    test('sentinel observes again if `currentLength` is extended without re-rendering', () => {
-        const tree = createTree({ currentLength: 5, pageSize: 5 });
-        const spy = jest.spyOn(tree.getInstance(), 'render');
+    test('sentinel observes again if `itemCount` increases', () => {
+        const tree = createTree({ itemCount: 5, pageSize: 5 });
         expect(tree.toJSON().children.length).toBe(5);
-        tree.update(<List pageSize={5} currentLength={20} />);
+        tree.update(<List pageSize={5} itemCount={20} />);
         expect(tree.toJSON().children.length).toBe(11);
-        expect(spy).toHaveBeenCalledTimes(1);
     });
 
-    test('sentinel observes again if pageSize is extended without re-rendering', () => {
-        const tree = createTree({ currentLength: 100, pageSize: 10 });
-        const spy = jest.spyOn(tree.getInstance(), 'render');
+    test('sentinel observes again if `pageSize` increases', () => {
+        const tree = createTree({ itemCount: 100, pageSize: 10 });
         expect(tree.toJSON().children.length).toBe(11);
-        tree.update(<List currentLength={100} pageSize={20} />);
+        tree.update(<List itemCount={100} pageSize={20} />);
         expect(tree.toJSON().children.length).toBe(31);
-        expect(spy).toHaveBeenCalledTimes(1);
     });
 
-    test('sentinel not present if `currentLength` updates from zero', () => {
-        const tree = createTree({ currentLength: 0 });
+    test('sentinel not present if `itemCount` increases below `pageSize`', () => {
+        const tree = createTree({ itemCount: 0 });
         const children = tree.toJSON().children;
         expect(children).toBeNull();
-        tree.update(<List currentLength={8} />);
+        tree.update(<List itemCount={8} />);
         const newChildren = tree.toJSON().children;
         expect(newChildren.length).toBe(8);
         expect(newChildren[newChildren.length - 1].type).toBe('div');
     });
 
-    test('sentinel observes with `awaitMore` bypassing the `currentLength` check', () => {
-        const tree = createTree({ currentLength: 5 });
+    test('sentinel observes with `awaitMore` bypassing the `itemCount` check', () => {
+        const tree = createTree({ itemCount: 5 });
         const children = tree.toJSON().children;
         expect(children.length).toBe(5);
-        tree.update(<List currentLength={5} awaitMore={true} />);
+        tree.update(<List itemCount={5} awaitMore={true} />);
         const newChildren = tree.toJSON().children;
         expect(newChildren.length).toBe(6);
         expect(newChildren[newChildren.length - 1].type).toBe('span');
     });
 });
 
-describe('setRootNode', () => {
+describe('set root node', () => {
     test('ref callback sets root node', () => {
-        createTree({ currentLength: 20 });
+        createTree({ itemCount: 20 });
         expect(mockCallback).toBeCalledWith(target);
     });
 
     test('ref callback does sets root node if unmounting', () => {
-        renderer.create(<List currentLength={20} />, {
+        renderer.create(<List itemCount={20} />, {
             createNodeMock: () => undefined,
         });
         expect(mockCallback).not.toBeCalled();
     });
 
     test('ref callback does sets root node without sentinel', () => {
-        const tree = createTree({ currentLength: 10 });
+        const tree = createTree({ itemCount: 10 });
         expect(tree.getInstance().setRootNode).toBeUndefined();
     });
 
@@ -125,49 +175,49 @@ describe('setRootNode', () => {
         window.getComputedStyle = jest.fn(() => ({
             overflowY: 'visible',
         }));
-        createTree({ currentLength: 20 });
+        createTree({ itemCount: 20 });
         expect(mockCallback).toBeCalledWith(null);
     });
 
     test('having same root node prevents call getComputedStyle', () => {
-        const tree = createTree({ currentLength: 20 });
+        const tree = createTree({ itemCount: 20 });
         tree.getInstance().setRootNode(target);
         expect(window.getComputedStyle).toHaveBeenCalledTimes(1);
     });
 });
 
-describe('handleUpdate', () => {
+describe('handle updates', () => {
     test('throws once if sentinel intersects with items on mount', () => {
         const spy = global.spyOn(console, 'error');
-        const instance = createTree({ currentLength: 10 }).getInstance();
+        const instance = createTree({ itemCount: 10 }).getInstance();
         instance.handleUpdate({ isIntersecting: true });
         expect(spy.calls.mostRecent().args[0]).toMatchSnapshot();
         instance.handleUpdate({ isIntersecting: true });
         expect(spy.calls.count()).toBe(1);
-        createTree({ currentLength: 0 })
+        createTree({ itemCount: 0 })
             .getInstance()
             .handleUpdate({ isIntersecting: true });
         expect(spy.calls.count()).toBe(1);
     });
 
     test('sets next size value computed into `pageSize`', () => {
-        const instance = createTree({ currentLength: 20 }).getInstance();
+        const instance = createTree({ itemCount: 20 }).getInstance();
         instance.handleUpdate({ isIntersecting: false });
         instance.handleUpdate({ isIntersecting: true });
         expect(instance.state.size).toBe(20);
     });
 
-    test('sets next size value computed into `currentLength`', () => {
-        const instance = createTree({ currentLength: 15 }).getInstance();
+    test('sets next size value computed into `itemCount`', () => {
+        const instance = createTree({ itemCount: 15 }).getInstance();
         instance.handleUpdate({ isIntersecting: false });
         instance.handleUpdate({ isIntersecting: true });
         expect(instance.state.size).toBe(15);
     });
 
-    test('calls `onIntersection` each time when `awaitIntersection` is falsy', () => {
+    test('invokes `onIntersection` each time when `awaitIntersection` is false', () => {
         const spy = jest.fn();
         const instance = createTree({
-            currentLength: 30,
+            itemCount: 30,
             onIntersection: spy,
         }).getInstance();
         instance.handleUpdate({ isIntersecting: false });
@@ -177,18 +227,19 @@ describe('handleUpdate', () => {
         expect(spy).toHaveBeenCalledTimes(2);
     });
 
-    test('calls `onIntersection` only once when `awaitIntersection` is true', () => {
+    test('invokes `onIntersection` only once when `awaitIntersection` is true', () => {
         const spy = jest.fn();
-        const tree = createTree({
+        const props = {
             awaitMore: true,
-            currentLength: 10,
+            itemCount: 10,
             onIntersection: spy,
-        });
+        };
+        const tree = createTree(props);
         tree.getInstance().handleUpdate({ isIntersecting: false });
         tree.getInstance().handleUpdate({ isIntersecting: true });
         tree.getInstance().handleUpdate({ isIntersecting: true });
         expect(tree.getInstance().state.size).toBe(10);
-        tree.update(<List awaitMore={true} currentLength={30} onIntersection={spy} />);
+        tree.update(<List {...props} itemCount={20} />);
         tree.getInstance().handleUpdate({ isIntersecting: true });
         expect(spy).toHaveBeenCalledTimes(2);
     });
diff --git a/src/__tests__/__snapshots__/List.spec.js.snap b/src/__tests__/__snapshots__/List.spec.js.snap
index a4621e47..658435c1 100644
--- a/src/__tests__/__snapshots__/List.spec.js.snap
+++ b/src/__tests__/__snapshots__/List.spec.js.snap
@@ -1,6 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`handleUpdate throws once if sentinel intersects with items on mount 1`] = `
+exports[`handle updates throws once if sentinel intersects with items on mount 1`] = `
 "Warning: ReactIntersectionList: the sentinel detected a viewport with a bigger size than the size of its items. This could lead to detrimental behavior, e.g.: triggering more than one onIntersection callback at the start.
 To prevent this, use either a bigger \`pageSize\` value or avoid using the prop awaitMore initially."
 `;
+
+exports[`render component given pertinent props throw with both itemCount and items props set 1`] = `
+"Warning: Failed prop type: \`items\` must be of type Array or a native type implementing the iterable interface
+    in List"
+`;
+
+exports[`render component given pertinent props throw with two different render function props 1`] = `"Warning: ReactIntersectionList: cannot use children and renderItem props as render function at the same time."`;
diff --git a/types/index.d.ts b/types/index.d.ts
new file mode 100644
index 00000000..8d9f0382
--- /dev/null
+++ b/types/index.d.ts
@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+export default class ListClass extends React.PureComponent<ListProps> {}
+
+type RenderFunction = (index: number, key: number) => JSX.Element | string;
+
+type IterableType =
+    | {
+          length: number;
+      }
+    | {
+          size: number;
+      };
+
+interface ChildrenAsFunction {
+    children: RenderFunction;
+    renderItem?: never;
+}
+
+interface RenderAsProp {
+    renderItem: RenderFunction;
+    children?: never;
+}
+
+interface ItemCountScalar {
+    itemCount: number;
+    items?: never;
+}
+
+interface ItemCountIterable {
+    items: IterableType;
+    itemCount?: never;
+}
+
+interface OptionalProps {
+    awaitMore?: boolean;
+    axis?: 'x' | 'y';
+    initialIndex?: number;
+    itemsRenderer?: (items: IterableType, ref: (instance: React.ReactInstance) => void) => JSX.Element;
+    onIntersection?: (nextSize: number, pageSize: number) => undefined;
+    pageSize?: number;
+    threshold?: string;
+}
+
+type RenderPropType = ChildrenAsFunction | RenderAsProp;
+
+type ItemCountPropType = ItemCountScalar | ItemCountIterable;
+
+type ListProps = RenderPropType & ItemCountPropType & OptionalProps;
diff --git a/types/test.tsx b/types/test.tsx
new file mode 100644
index 00000000..36f3f978
--- /dev/null
+++ b/types/test.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import List from '..';
+
+<List items={[]}>{() => ''}</List>;
+
+<List itemCount={Infinity} renderItem={() => <b>bold</b>} />;
+
+<List
+    itemCount={100}
+    awaitMore={false}
+    axis="y"
+    initialIndex={50}
+    pageSize={25}
+    threshold="50%"
+    itemsRenderer={(items, ref) => <div ref={ref}>{items}</div>}
+>
+    {(index, key) => `${index}${key}`}
+</List>;
diff --git a/types/tsconfig.json b/types/tsconfig.json
new file mode 100644
index 00000000..5568ecb6
--- /dev/null
+++ b/types/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "jsx": "React",
+    "noEmit": true
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index cb489f45..1086a54e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -360,10 +360,6 @@ ajv-keywords@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0"
 
-ajv-keywords@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
-
 ajv@^4.7.0, ajv@^4.9.1:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
@@ -6703,9 +6699,9 @@ react-docgen@^2.15.0:
     node-dir "^0.1.10"
     recast "^0.12.6"
 
-react-dom@^16.1.1:
-  version "16.1.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.1.1.tgz#b2e331b6d752faf1a2d31399969399a41d8d45f8"
+react-dom@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"
@@ -6805,9 +6801,9 @@ react-treebeard@^2.0.3:
     shallowequal "^0.2.2"
     velocity-react "^1.3.1"
 
-react@^16.1.1:
-  version "16.1.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.1.1.tgz#d5c4ef795507e3012282dd51261ff9c0e824fe1f"
+react@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"
@@ -7215,13 +7211,6 @@ schema-utils@^0.3.0:
   dependencies:
     ajv "^5.0.0"
 
-schema-utils@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.3.tgz#e2a594d3395834d5e15da22b48be13517859458e"
-  dependencies:
-    ajv "^5.0.0"
-    ajv-keywords "^2.1.0"
-
 semver-regex@1.0.0, semver-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-1.0.0.tgz#92a4969065f9c70c694753d55248fc68f8f652c9"
@@ -7681,12 +7670,12 @@ style-loader@^0.18.2:
     loader-utils "^1.0.2"
     schema-utils "^0.3.0"
 
-style-loader@^0.20.0:
-  version "0.20.1"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.20.1.tgz#33ac2bf4d5c65a8906bc586ad253334c246998d0"
+style-loader@^0.19.0:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.19.1.tgz#591ffc80bcefe268b77c5d9ebc0505d772619f85"
   dependencies:
-    loader-utils "^1.1.0"
-    schema-utils "^0.4.3"
+    loader-utils "^1.0.2"
+    schema-utils "^0.3.0"
 
 supports-color@^2.0.0:
   version "2.0.0"
@@ -7924,6 +7913,10 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+typescript@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.6.2.tgz#3c5b6fd7f6de0914269027f03c0946758f7673a4"
+
 ua-parser-js@^0.7.9:
   version "0.7.14"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.14.tgz#110d53fa4c3f326c121292bbeac904d2e03387ca"