docs: ✏️ add <InfiniteScroll> to docs

Author: streamich

README.md

@@ -2,7 +2,7 @@
 
 # libreact
 
-[![][npm-badge]][npm-url] [![][travis-badge]][travis-url] [![React Universal Interface](https://img.shields.io/badge/React-Universal%20Interface-green.svg)](https://github.com/streamich/react-universal-interface) [![Backers on Open Collective](https://opencollective.com/libreact/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/libreact/sponsors/badge.svg)](#sponsors) 
+[![][npm-badge]][npm-url] [![][travis-badge]][travis-url] [![React Universal Interface](https://img.shields.io/badge/React-Universal%20Interface-green.svg)](https://github.com/streamich/react-universal-interface) [![Backers on Open Collective](https://opencollective.com/libreact/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/libreact/sponsors/badge.svg)](#sponsors)
 
 React standard library—must-have toolbox for any React project.
 
@@ -90,6 +90,7 @@ const MyComponent = mock();
      - [`<Slider>`](./docs/en/Slider.md)
      - [`<DropArea>`](./docs/en/DropArea.md)
      - [`<Group>`](./docs/en/Group.md)
+     - [`<InfiniteScroll>`](./docs/en/InfiniteScroll.md)
      - [`<OutsideClick>`](./docs/en/OutsideClick.md)
      - [`<Ripple>`](./docs/en/Ripple.md) and [`withRipple()`](./docs/en/Ripple.md#withripple) &mdash; [**example**](https://codesandbox.io/s/983q7jr80o)
      - [`<Img>`](./docs/en/Img.md)

docs/en/InfiniteScroll.md

@@ -0,0 +1,27 @@
+# `<InfiniteScroll>`
+
+Fires `loadMore` prop when end of content becomes visible.
+
+
+## Usage
+
+```jsx
+import {InfiniteScroll} from 'libreact/lib/InfiniteScroll';
+
+<InfiniteScroll
+  hasMore={true || false}
+  cursor={cursor}
+  loadMore={() => {/* ... */}}
+>
+  {items}
+</InfiniteScroll>
+```
+
+
+## Props
+
+- `loadMore` &mdash; required, function that is called when user scrolls to the bottom of the component.
+- `cursor` &mdash; required, unique identifier of current page, `loadMore` is called only once for each adjacent unique value of `cursor`.
+- `hasMore` &mdash; optional, boolean, whether there are more items to load, if set to `false`, `loadMore` will not be called.
+- `sentinel` &mdash; optional, React element to render at the bottom of the component, when this element becomes visible it triggers `loadMore` function, defaults to empty `<div>` pixel.
+- `margin` &mdash; optional, number, invisible margin before `sentinel` when to already call `loadMore` before `sentinel` is visible, defaults to `100`.

docs/en/README.md

@@ -56,6 +56,7 @@
      - [`<Slider>`](./Slider.md)
      - [`<DropArea>`](./DropArea.md)
      - [`<Group>`](./Group.md)
+     - [`<InfiniteScroll>`](./InfiniteScroll.md)
      - [`<OutsideClick>`](./OutsideClick.md)
      - [`<Ripple>`](./Ripple.md) and [`withRipple()`](./Ripple.md#withripple) &mdash; [**example**](https://codesandbox.io/s/983q7jr80o)
      - [`<Img>`](./Img.md)

docs/en/SUMMARY.md

@@ -69,6 +69,7 @@
   * [Ripple](Ripple.md)
   * [Img](Img.md)
   * [Group](Group.md)
+  * [InfiniteScroll](InfiniteScroll.md)
   * [WidthQuery](WidthQuery.md)
   * [View](View.md)
   * [WindowWidthQuery](WindowWidthQuery.md)

src/InfiniteScroll/__story__/story.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {InfiniteScroll} from '..';
+import ShowDocs from '../../ShowDocs';
 
 const h = React.createElement;
 
@@ -51,5 +52,5 @@ class Demo extends React.Component {
 }
 
 storiesOf('UI/InfiniteScroll', module)
-  // .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Lifecycles.md')}))
+  .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/InfiniteScroll.md')}))
   .add('Example', () => <Demo />)