Feature: Add useObserveScrollPosition and useScrollTo (#49)

* Add new hooks

* Rename

* Clean up

* Clean up

* Clean up

* Clean up

* Rename and ESLint

* Add useObserveScrollPosition

* Update entry

* Clean up

* Move ESLint out

* Add breaking changes

* Clean up

* Clean up

* Add badge

Author: compulim

.eslintrc.yml

@@ -6,12 +6,6 @@ extends:
 - eslint:recommended
 globals:
   React: readonly
-parser: babel-eslint
-parserOptions:
-  ecmaFeatures:
-    jsx: true
-  ecmaVersion: 10
-  sourceType: module
 root: true
 rules:
   # Only list rules that are not in *:recommended set

CHANGELOG.md

@@ -1,14 +1,18 @@
 # Changelog
+
 All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
-### Added
+### Breaking changes
 
-- Added version number to `<meta name="react-scroll-to-bottom:version">` for diagnostic purpose, in PR [#51](https://github.com/compulim/react-scroll-to-bottom/pull/51)
+- `scrollToBottom`/`scrollToEnd`/`scrollToStart`/`scrollToTop` now accept an option `{ behavior: 'auto' | 'smooth' }`
+   - Without the option, it is by default to artificial smooth scrolling (`smooth`), to keep existing behavior
+   - This behavior may change in the future, by defaulting to discrete scrolling (`auto`), to better align with HTML `DOMElement.scrollIntoView` standard
+   - During the transition, please always pass `{ behavior: 'smooth' }` to keep existing behavior
 
 ### Changed
 
@@ -23,6 +27,22 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
    - [`eslint-plugin-react@7.20.0`](https://www.npmjs.com/package/eslint-plugin-react)
    - [`eslint-plugin-react-hooks@4.0.4`](https://www.npmjs.com/package/eslint-plugin-react-hooks)
 
+### Added
+
+- Added version number to `<meta name="react-scroll-to-bottom:version">` for diagnostic purpose, in PR [#51](https://github.com/compulim/react-scroll-to-bottom/pull/51)
+- Added `useAnimatingToEnd` getter to indicate if it is animating towards to the end, in PR [#49](https://github.com/compulim/react-scroll-to-bottom/pull/49)
+   - The existing `useAnimating` getter only indicate if it is animating to any scroll positions
+- Added `scrollTo` function to scroll to a specific `scrollTop` value, this is similar to `DOMElement.scrollIntoView()`, in PR [#49](https://github.com/compulim/react-scroll-to-bottom/pull/49)
+   - The signature is `scrollTo(scrollTop: number, options: { behavior: 'auto' | 'smooth' })`
+   - Pass `{ behavior: 'smooth' }` for synthetic smooth scrolling
+- Added `useObserveScrollTop` hook to observe scroll event, in PR [#49](https://github.com/compulim/react-scroll-to-bottom/pull/49)
+   - This effect function will be called rapidly on scroll, please avoid expensive code such as calling setter of `useState` and any code that would cause re-render
+
+### Fixed
+
+- Cancel scroll animation on mouse wheel or touch gesture, in PR [#49](https://github.com/compulim/react-scroll-to-bottom/pull/49)
+- Calling `scrollTo` should cancel any existing scroll animation, in PR [#49](https://github.com/compulim/react-scroll-to-bottom/pull/49)
+
 ## [2.0.0] - 2020-05-07
 
 ### Breaking changes

README.md

@@ -1,6 +1,6 @@
 # react-scroll-to-bottom
 
-[![npm version](https://badge.fury.io/js/react-scroll-to-bottom.svg)](https://badge.fury.io/js/react-scroll-to-bottom) [![Build Status](https://travis-ci.org/compulim/react-scroll-to-bottom.svg?branch=master)](https://travis-ci.org/compulim/react-scroll-to-bottom)
+[![npm version](https://badge.fury.io/js/react-scroll-to-bottom.svg)](https://badge.fury.io/js/react-scroll-to-bottom) ![Node.js CI](https://github.com/compulim/react-scroll-to-bottom/workflows/Node.js%20CI/badge.svg)
 
 React container that will auto scroll to bottom or top if new content is added and viewport is at the bottom, similar to `tail -f`. Otherwise, a "jump to bottom" button will be shown to allow user to quickly jump to bottom.
 
@@ -10,7 +10,16 @@ Try out the demo at [https://compulim.github.io/react-scroll-to-bottom/](https:/
 
 # Breaking changes
 
-Starting from `react-scroll-to-bottom@2`, we requires React 16.8.6 or above. This enable developers to use React Hooks to add features to the scroll view.
+## Upcoming
+
+- `scrollToBottom`/`scrollToEnd`/`scrollToStart`/`scrollToTop` now accept an option `{ behavior: 'auto' | 'smooth' }`
+   - Without the option, it is by default to artificial smooth scrolling (`smooth`), to keep existing behavior
+   - This behavior may change in the future, by defaulting to discrete scrolling (`auto`), to better align with HTML `DOMElement.scrollIntoView` standard
+   - During the transition, please always pass `{ behavior: 'smooth' }` to keep existing behavior
+
+## [2.0.0] - 2020-05-07
+
+- Starting from `react-scroll-to-bottom@2`, we requires React 16.8.6 or above. This enable developers to use React Hooks to add features to the scroll view.
 
 # Sample code
 
@@ -182,6 +191,11 @@ This context contains functions used to manipulate the container. And will not u
     </tr>
   </thead>
   <tbody>
+    <tr>
+      <td><code>useObserveScrollPosition</code></td>
+      <td><code>(observer: (({ scrollTop: number }) => void) | false) => void</code></td>
+      <td>Observe scroll position change by passing a callback function</td>
+    </tr>
     <tr>
       <td><code>useScrollTo</code></td>
       <td><code>(scrollTop: number | '100%') => void</code></td>
@@ -210,6 +224,8 @@ This context contains functions used to manipulate the container. And will not u
   </tbody>
 </table>
 
+> Callback function passed to `useObserveScrollPosition` will be called rapidly during scrolling. To unsubscribe, pass a falsy value.
+
 ### State context
 
 This context contains state of the container.
@@ -228,6 +244,11 @@ This context contains state of the container.
       <td><code>boolean</code></td>
       <td><code>true</code> if the panel is animating scroll effect</td>
     </tr>
+    <tr>
+      <td><code>useAnimatingToEnd</code></td>
+      <td><code>boolean</code></td>
+      <td><code>true</code> if the panel is animating scroll effect and towards the end (depends on <code>mode</code>)</td>
+    </tr>
     <tr>
       <td><code>useAtBottom</code></td>
       <td><code>boolean</code></td>