Update README.md and cleanup

Author: compulim

README.md

@@ -10,7 +10,7 @@ This project scaffolding is from [react-component-template](https://github.com/c
 
 Try out the demo at [https://compulim.github.io/react-scroll-to-bottom/](https://compulim.github.io/react-scroll-to-bottom/).
 
-# Sample
+# Sample code
 
 ```jsx
 import { css } from 'glamor';
@@ -31,6 +31,25 @@ export default props =>
 
 > We use [`glamor`](https://github.com/threepointone/glamor/) for component styles. It is not required, but we don't support `style` props for performance reason.
 
+## Props
+
+| Name | Default | Description |
+| - | - | - |
+| `mode` | `"bottom"` | Set it to `"bottom"` for scroll-to-bottom, `"top"` for scroll-to-top. |
+
+## Context
+
+| Name | Type | Description |
+| - | - | - |
+| `atBottom` | Boolean | `true` if the panel is currently near bottom (see `threshold`) |
+| `atEnd` | Boolean | `true` if the panel is currently near the end (see `mode` and `threshold` |
+| `atTop` | Boolean | `true` if the panel is currently near top (see `threshold`) |
+| `mode` | String | `"bottom"` for scroll-to-bottom, `"top"` for scroll-to-top |
+| `scrollToBottom` | Function | Call to scroll panel to bottom |
+| `scrollToEnd` | Function | Call to scroll panel to end |
+| `scrollToTop` | Function | Call to scroll panel to top |
+| `threshold` | Number | Threshold in pixels to consider the panel is near top/bottom, read-only and only set thru `props` |
+
 # Contributions
 
 Like us? [Star](https://github.com/compulim/react-scroll-to-bottom/stargazers) us.

packages/component/src/ScrollToBottom/Composer.js

@@ -27,20 +27,24 @@ export default class ScrollToBottomComposer extends React.Component {
       })),
       scrollTop: null,
       setTarget: target => this.setState(() => ({ target })),
-      target: null
+      target: null,
+      threshold: 10
     };
   }
 
   componentWillReceiveProps(nextProps) {
-    this.setState(() => ({ mode: nextProps.mode === 'top' ? 'top' : 'bottom' }));
+    this.setState(() => ({
+      mode: nextProps.mode === 'top' ? 'top' : 'bottom',
+      threshold: nextProps.threshold
+    }));
   }
 
   handleScroll() {
-    this.setState(({ mode, target }) => {
+    this.setState(({ mode, target, threshold }) => {
       if (target) {
         const { offsetHeight, scrollHeight, scrollTop } = target;
-        const atBottom = scrollHeight - scrollTop - offsetHeight <= this.props.threshold;
-        const atTop = scrollTop <= this.props.threshold;
+        const atBottom = scrollHeight - scrollTop - offsetHeight <= threshold;
+        const atTop = scrollTop <= threshold;
 
         return {
           atBottom,

packages/component/src/ScrollToBottom/Context.js

@@ -1,10 +1,16 @@
 import React from 'react';
 
 export default React.createContext({
-  bottom: true,
+  atBottom: true,
+  atEnd: true,
+  atTop: true,
+  mode: 'bottom',
   handleUpdate: () => 0,
   scrollToBottom: () => 0,
+  scrollToEnd: () => 0,
+  scrollToTop: () => 0,
   scrollTop: null,
   setTarget: () => 0,
-  target: null
+  target: null,
+  threshold: 10
 });