chore: example update

Author: ron0115

example/Demo.tsx

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

example/DirectionX.tsx

@@ -0,0 +1,83 @@
+import React, { useState, useRef } from "react";
+import useSmoothScroll from "react-smooth-scroll-hook";
+
+export const DirectionX = () => {
+  const [speed, setSpeed] = useState(50);
+  const ref = useRef<HTMLDivElement>(null);
+  const { scrollTo, reachTop, reachBottom, scrollToPage } = useSmoothScroll({
+    ref,
+    direction: "x",
+    speed
+  });
+  const onChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    setSpeed(Number(evt.target.value));
+  };
+  return (
+    <>
+      <button onClick={() => scrollTo("#x-item-20")}>
+        scrollTo('#x-item-20')
+      </button>
+      <button onClick={() => scrollTo(Infinity)}>
+        scrollTo Edge - scrollTo(Infinity)
+      </button>
+      <button onClick={() => scrollTo(-Infinity)}>
+        scrollTo Edge - scrollTo(-Infinity)
+      </button>
+      <button onClick={() => scrollTo(100)}>scrollTo(100)</button>
+      <button onClick={() => scrollTo(-100)}>scrollTo(-100)</button>
+
+      <br />
+      <div>
+        speed:{speed}
+        <br />
+        <input
+          value={speed}
+          onChange={onChange}
+          type="range"
+          min={100}
+          max={500}
+        />
+        <br />
+        reachTop: {String(reachTop)}
+        <br />
+        reachBottom: {String(reachBottom)}
+      </div>
+      <br />
+      <button disabled={reachBottom} onClick={() => scrollToPage(1)}>
+        scrollToPage(1)
+      </button>
+      <button disabled={reachTop} onClick={() => scrollToPage(-1)}>
+        scrollToPage(-1)
+      </button>
+
+      <div
+        ref={ref}
+        style={{
+          overflowX: "scroll"
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            padding: "10px"
+          }}
+        >
+          {Array(50)
+            .fill(null)
+            .map((_item, i) => (
+              <div
+                key={i}
+                id={`x-item-${i}`}
+                style={{
+                  flexShrink: 0,
+                  padding: "10px"
+                }}
+              >
+                x-item-{i}
+              </div>
+            ))}
+        </div>
+      </div>
+    </>
+  );
+};

example/index.tsx

@@ -1,34 +1,16 @@
 import "react-app-polyfill/ie11";
 import * as ReactDOM from "react-dom";
-import React, { useRef } from "react";
-import { useSmoothScroll } from "react-smooth-scroll-hook";
+import React from "react";
+import { Demo } from "./Demo";
+import { DirectionX } from "./DirectionX";
 export default function App() {
-  const ref = useRef(null);
-  const { scrollTo } = useSmoothScroll({
-    ref
-  });
   return (
     <div className="App">
       <h1>react-smooth-scroll-hook</h1>
-      <button onClick={() => scrollTo("#item-10")}>scrollTo("#item-10")</button>
-      <button onClick={() => scrollTo(Infinity)}>scrollTo(Infinity)</button>
-      <button onClick={() => scrollTo(-Infinity)}>scrollTo(-Infinity)</button>
-      <br />
-      <div
-        ref={ref}
-        style={{
-          overflowY: "scroll",
-          maxHeight: "400px"
-        }}
-      >
-        {Array(100)
-          .fill(null)
-          .map((_item, i) => (
-            <div key={i} id={`item-${i}`}>
-              {i}
-            </div>
-          ))}
-      </div>
+      <h2>Demo.tsx</h2>
+      <Demo />
+      <h2>DirectionX.tsx</h2>
+      <DirectionX />
     </div>
   );
 }