Merge branch 'master' into dev

Author: ron0115

.github/workflows/main.yml .github/workflows/release.yml.github/workflows/main.yml renamed to .github/workflows/release.yml

@@ -1,4 +1,4 @@
-name: Deploy
+name: Release
 on:
   push:
     branches:

.github/workflows/storybook.yml

@@ -0,0 +1,60 @@
+name: Storybook
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - 'stories/**'
+      - 'example/**'
+      - README.md
+
+  pull_request:
+    branches:
+      - master
+    paths:
+      - 'stories/**'
+      - 'example/**'
+      - README.md
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Begin CI...
+        uses: actions/checkout@v2
+
+      - name: Use Node 12
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+
+      - name: Use cached node_modules
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: nodeModules-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            nodeModules-
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+        env:
+          CI: true
+
+      # - name: Lint
+      #   run: yarn lint
+      #   env:
+      #     CI: true
+
+      # - name: Test
+      #   run: yarn test --ci --coverage --maxWorkers=2
+      #   env:
+      #     CI: true
+
+      - name: Deploy
+        run: |
+          npm run deploy-storybook -- --ci
+        env:
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.storybook/main.js

@@ -2,7 +2,7 @@ const path = require('path');
 const basePath = path.resolve(__dirname, '../', 'src');
 
 module.exports = {
-  stories: ['../(stories|example)/**/*.stories.(ts|tsx)'],
+  stories: ['../@(stories|example)/*.stories.@(ts|tsx)'],
   addons: [
     '@storybook/addon-actions',
     '@storybook/addon-links',

.storybook/preview.js

@@ -0,0 +1,6 @@
+export const parameters = {
+  options: {
+    storySort: { order: ['Introduction', 'Main', 'More'] },
+    viewMode: 'docs',
+  },
+};

CHANGELOG.md

@@ -1,3 +1,31 @@
+## [1.3.3](https://github.com/ron0115/react-smooth-scroll-hook/compare/v1.3.2...v1.3.3) (2020-08-29)
+
+
+### Features
+
+* **API:** deprecated scrollToPage ([be27bde](https://github.com/ron0115/react-smooth-scroll-hook/commit/be27bdeea3af88e972ed29883680218d04ad9f31))
+
+## [1.3.2](https://github.com/ron0115/react-smooth-scroll-hook/compare/v1.3.1...v1.3.2) (2020-08-28)
+
+
+### Bug Fixes
+
+* detect some event when dom change ([5dc4ef8](https://github.com/ron0115/react-smooth-scroll-hook/commit/5dc4ef83234550c22a005ebff1dc309b860697b3))
+
+## [1.3.1](https://github.com/ron0115/react-smooth-scroll-hook/compare/v1.3.0...v1.3.1) (2020-08-28)
+
+
+### Features
+
+* useScrollWatch hook to detect scroll event ([7c0a42c](https://github.com/ron0115/react-smooth-scroll-hook/commit/7c0a42cf9ac47fb475eff980f2b6b9da24cb303f))
+
+# [1.3.0](https://github.com/ron0115/react-smooth-scroll-hook/compare/v1.2.0...v1.3.0) (2020-08-27)
+
+
+### Features
+
+* support documentParent mode ([0deb1bd](https://github.com/ron0115/react-smooth-scroll-hook/commit/0deb1bdaa5ee0824426cc0df320c276c79923b50))
+
 # [1.2.0](https://github.com/ron0115/react-smooth-scroll-hook/compare/v1.1.0...v1.2.0) (2020-08-25)
 
 

README.md

@@ -1,20 +1,18 @@
-# react-smooth-scroll-hook
+# [react-smooth-scroll-hook](https://github.com/ron0115/react-smooth-scroll-hook)
 
-This is a hook to control your scrollbar in react component!
+[![GitHub license](https://img.shields.io/github/license/ron0115/react-smooth-scroll-hook?style=flat)](https://github.com/ron0115/react-smooth-scroll-hook/blob/master/LICENSE)
+[![npm version](http://img.shields.io/npm/v/react-smooth-scroll-hook.svg?style=flat)](https://npmjs.org/package/react-smooth-scroll-hook)
+[![GitHub stars](https://img.shields.io/github/stars/ron0115/react-smooth-scroll-hook?style=flat)](https://github.com/ron0115/react-smooth-scroll-hook/stargazers)
 
-Basically; `useSmoothScroll` hook use `requestAnimationFrame` to finish smooth scroll behaviour!
+The `useSmoothScroll` hook finish smooth scroll behaviour in react component by `requestAnimationFrame`.
 
-If you want to control the `speed` of scroll behaviour, it defaults to use `requestAnimationFrame` mode.
-
-**Examples are <a target="_blank" href="https://ron0115.best/react-smooth-scroll-hook/?path=/docs/usesmoothscroll--docs#basic" >Here</a>.**(Storybook)
-
-**Live demo is <a target="_blank" href="https://codesandbox.io/s/reverent-cerf-ks4xh?file=/index.tsx" >Here</a>.**(Codesandbox)
+> **Storybook Docs are <a target="_blank" href="https://ron0115.best/react-smooth-scroll-hook/?path=/docs/main-usesmoothscroll--docs" >Here</a>.**
 
 ## Feature
 
 - 🚀 You don't need to warn about compatibility, it use `requsetAnimationFrame` api to finish smooth scroll behaviour.
 
-- 👉 Provide `direction` option ,you can set `x` for vertical, `y` for horizontal.
+- 👉 Provide `direction` option ,you can set `x` for horizontal, `y` for vertical.
 
 - 💧 No Third Party dependencies, light and pure.
 
@@ -24,63 +22,152 @@ If you want to control the `speed` of scroll behaviour, it defaults to use `requ
 npm install react-smooth-scroll-hook
 ```
 
-## Basic Usage
+## useSmoothScroll
+
+### Quick Start
 
 ```tsx
 import React, { useRef } from 'react';
 import useSmoothScroll from 'react-smooth-scroll-hook';
 export const Demo = () => {
-  const ref = useRef<HTMLDivElement>(null);
+  // A custom scroll container
+  const ref = useRef(null);
+
+  // Also support document.body / document.documentElement, and you don't need to set a ref passing to jsx
+  const ref = useRef(document.body);
+
   const { scrollTo } = useSmoothScroll({
     ref,
+    speed: 100,
+    direction: 'y',
   });
 
   return (
     <>
       <button onClick={() => scrollTo('#item-20')}>scrollTo('#item-20')</button>
       <div
+        // if use custom scroll container, pass ref
         ref={ref}
         style={{
           overflowY: 'scroll',
           maxHeight: '200px',
         }}
       >
-        <div>
-          {Array(100)
-            .fill(null)
-            .map((_item, i) => (
-              <div key={i} id={`item-${i}`}>
-                y-{i}
-              </div>
-            ))}
-        </div>
+        {Array(100)
+          .fill(null)
+          .map((_item, i) => (
+            <div key={i} id={`item-${i}`}>
+              item-{i}
+            </div>
+          ))}
       </div>
     </>
   );
 };
 ```
 
-## Props
+### Props
 
-- **ref:** `RefObject<HTMLElement>`, container which set as `overflow: scroll`.
+- **ref:** `RefObject<HTMLElement>`, container which set as `overflow: scroll`, if scroll whole document, pass `ref = useRef(document.documentElement)` or `useRef(document.body)`.
 - **speed:** Distance in one frame to move in `requestAnimationFrame` mode, defaults to `100`, if not provide, speed depends on native API `scrollTo`.
-- **direction:** Scroll direction
+- **direction:** Scroll direction, `x` for horizontal or `y` for vertical.
 - **threshold:** Judge scroll is finished has an error range, .defaults to `1`.
 
-### Returns of Hook
+#### Returns of Hook
 
 - **scrollTo** `(string|number) => void`
 
   - Pass `number`: the distance to scroll, e.g. `scrollTo(400)`
   - Pass `string`: the element seletor you want to scrollTo, meanwhile passing to `document.querySelector`, e.g. `scrollTo('#your-dom-id')`
 
-- **reachTop** `boolean`: Whether it has reached the top of scrollContainer
+- **reachedTop** `boolean`: Whether it has reached the top of refContainer
 
-- **reachBottom** `boolean`: Whether it has reached the bottom of scrollContainer
+- **reachedBottom** `boolean`: Whether it has reached the bottom of refContainer
 
 - **scrollToPage** `(number) => void`: Pass page(`number`), which scroll to a distance as multiples of container size(`offsetWidth`/`offsetHeight`)
   .e.g `scrollToPage(1)`,`scrollToPage(-1)`
 
-- **refreshState** `() => void`: Manually refresh the state of `reachTop` and `reachBottom`, just an API as you need, and possibly useful in some situation.
+- **refreshState** `() => void`: Manually refresh the state of `reachTop` and `reachBottom`, possibly useful in some situation.
+
+- **refreshSize** `() => void`: Manually refresh the size of ref container, possibly useful in some situation.
+
+### Demo
+
+- **<a target="_blank" href="https://codesandbox.io/s/usesmoothscroll-2zt20?file=/Body.stories.tsx" >CodeSandbox</a>**
+- **<a target="_blank" href="https://ron0115.best/react-smooth-scroll-hook/?path=/docs/main-usesmoothscroll--docs" >Storybook</a>**
+
+## useScrollWatch
+
+Proviede a `list` of dom like below, and pass the parent container `ref` to hook, it return the scrollbar current state of `scrollTop`, `curIndex`, `curItem`.
+
+### Quick Start
+
+```tsx
+import React, { useRef } from 'react';
+import { useScrollWatch } from 'react-smooth-scroll-hook';
+export const ScrollConatainerMode = () => {
+  const ref = useRef(null);
+  const { scrollTop, curIndex, curItem } = useScrollWatch({
+    ref,
+    list: [
+      {
+        href: '#item-0',
+      },
+      {
+        href: '#item-10',
+      },
+      {
+        href: '#item-20',
+      },
+    ],
+  });
+  return (
+    <>
+      <h2>Scroll Container Mode</h2>
+      <div>
+        <p>
+          <strong>scrollTop:</strong> {scrollTop}
+        </p>
+        <p>
+          <strong>curIndex:</strong> {curIndex}
+        </p>
+        <p>
+          <strong>curHref:</strong> {curItem?.href}
+        </p>
+      </div>
+      <div
+        style={{
+          padding: '10px',
+          maxHeight: '200px',
+          overflowY: 'scroll',
+        }}
+        ref={ref}
+      >
+        {Array(100)
+          .fill(null)
+          .map((_item, i) => (
+            <div key={i} id={`item-${i}`}>
+              item-{i}
+            </div>
+          ))}
+      </div>
+    </>
+  );
+};
+```
+
+### Props
+
+- **list** `Array({href, offset})`: `href` is elemet selector string, which passing to `querySelector`, such as `#element-id`
+- **ref**: the same as ref of `useSmoothScroll`
+
+### Returns of Hook
+
+- **scrollTop** `number`: current scrollTop of scroll container.
+- **curIndex** `number`: current Index of list
+- **curItem** `{href, offset}`: current Item of list
+
+### Demo
 
-- **refreshSize** `() => void`: Manually refresh the size of ref container, just an API as you need, and possibly useful in some situation.
+- **<a target="_blank" href="https://codesandbox.io/s/gifted-field-5b3ui?file=/UseScrollWatch.stories.tsx:9-24" >CodeSandbox</a>**
+- **<a target="_blank" href="https://ron0115.best/react-smooth-scroll-hook/?path=/docs/more-usescrollwatch--docs" >Storybook</a>**

example/Body.stories.tsx

@@ -0,0 +1,31 @@
+import useSmoothScroll from 'react-smooth-scroll-hook';
+import React, { useRef } from 'react';
+
+export const Body = () => {
+  const ref = useRef<HTMLElement>(document.documentElement);
+  const { scrollTo } = useSmoothScroll({
+    ref,
+  });
+
+  return (
+    <>
+      <button onClick={() => scrollTo('#item-20')}>scrollTo('#item-20')</button>
+      <button onClick={() => scrollTo(400)}>scrollTo(400)</button>
+      <br />
+      <div
+        style={{
+          padding: '10px',
+        }}
+      >
+        {Array(100)
+          .fill(null)
+          .map((_item, i) => (
+            <div key={i} id={`item-${i}`}>
+              item-{i}
+            </div>
+          ))}
+      </div>
+      <button onClick={() => scrollTo('#item-20')}>scrollTo('#item-20')</button>
+    </>
+  );
+};