chore(website): new version

packages/website/components/Logo.js

@@ -1,23 +1,19 @@
 // @jsx jsx
 import { Box, jsx } from "theme-ui";
-import { useEffect, useRef } from "react";
+import { useRef } from "react";
 import { useScroom } from "@scroom/react";
 
 export default function Logo() {
   const ref = useRef();
-  const sc = useScroom(ref, {
+
+  useScroom(ref, {
     offset: 0.1,
+    onProgress({ target, progress }) {
+      const svg = target.querySelector("svg");
+      svg.style.transform = `rotate(${progress}turn)`;
+    },
   });
 
-  useEffect(() => {
-    if (sc) {
-      sc.onProgress((progress, el) => {
-        const svg = el.querySelector("svg");
-        svg.style.transform = `rotate(${progress}turn)`;
-      });
-    }
-  }, [sc]);
-
   return (
     <Box
       ref={ref}

packages/website/src/api.mdx

@@ -3,63 +3,79 @@ name: API Reference
 route: /api/
 ---
 
-## Options
+## CreateScroomOptions
 
-The options you provided when setup Scroom.
+The options you provided when creating scroom instance.
 
 ```ts
-const sc = setup({
-  target: Element, // Required. Target element to be detected.
-  offset: number, // Default: 0.5 (%). How far from the top of the viewport to detect. (default is middle of sceen)
-  threshold: number // Default: 0.01 (%). Progress step, indicates the frequency of detecting.
-});
+export interface CreateScroomOptions<T extends Element> {
+  /** target element */
+  target: T;
+  /** trigger distance from the top/left of the viewport. unit: %. range: 0 - 1. default: 0.5 */
+  offset?: number;
+  /** scrolling detection frequency threshold. unit: px. default: 4 */
+  threshold?: number;
+  /** scrolling detection direction. default: vertical */
+  direction?: "vertical" | "horizontal";
+}
 ```
 
 <br />
 
-## Methods
+## Props
 
-Methods of Scroom instance.
+Props of scroom instance.
 
 ```ts
-sc.onEnter((el: Element) => void)
+/** scroom instance */
+export interface ScroomInstance<T extends Element> {
+  target: T;
+  /** intersection observer inside this instance */
+  observer: IntersectionObserver;
+  /** add event listener */
+  on: Emittery<ScroomEventMap<T>>["on"];
+  /** add event listener for once */
+  once: Emittery<ScroomEventMap<T>>["once"];
+  /** remove event listener */
+  off: Emittery<ScroomEventMap<T>>["off"];
+  /** destroy instance and remove all event listeners */
+  destroy: () => void;
+}
 ```
 
-Callback that fires when the top or bottom edge of a step element enters the offset threshold.
-
-**Params**:
-
-- el: Target Element
-
-<br />
+## Events
 
 ```ts
-sc.onLeave((el: Element) => void)
+sc.on("enter", (data) => void);
 ```
 
-Callback that fires when the top or bottom edge of a step element leaves the offset threshold.
+Callback that fires when the edge of a step element enters the offset threshold.
 
 **Params**:
 
-- el: Target Element
+- target: Target Element
 
 <br />
 
 ```ts
-sc.onProgress((progress: number, el: Element) => void)
+sc.on("leave", (data) => void);
 ```
 
-Callback that fires the progress (0 - 1) a step has made through the threshold.
+Callback that fires when edge of a step element leaves the offset threshold.
 
 **Params**:
 
-- progress: The percent of completion of the step (0 - 1)
-- el: Target Element
+- target: Target Element
 
 <br />
 
 ```ts
-sc.destroy();
+sc.on("progress", (data) => void);
 ```
 
-Removes all observers and callback functions.
+Callback that fires the progress (0 - 1) a step has made through the threshold.
+
+**Params**:
+
+- target: Target Element
+- progress: The percent of completion of the step (0 - 1)

packages/website/src/debug.mdx

@@ -4,16 +4,16 @@ route: /debug/
 ---
 
 import { Playground } from "docz";
-import { setup, debug } from "scroom";
+import { createScroom, debug } from "scroom";
 
 # Debug
 
 The debug tool of Scroom can help you locate the problem quickly.
 
 ```js
-import { setup, debug } from "scroom";
+import { createScroom, debug } from "scroom";
 
-const sc = setup(...);
+const sc = createScroom(...);
 
 debug(sc)
 ```
@@ -24,12 +24,13 @@ debug(sc)
   {() => {
     const ref = React.useRef();
     React.useEffect(() => {
-      const sc = setup({
+      const sc = createScroom({
         target: ref.current,
       });
-      debug(sc);
+      const debugController = debug(sc);
       return () => {
         sc.destroy();
+        debugController.destroy();
       };
     }, []);
     return <div ref={ref} style={{ height: "300px" }} />;

packages/website/src/examples.mdx

@@ -4,7 +4,7 @@ route: /examples/
 ---
 
 import { Playground } from "docz";
-import { setup } from "scroom";
+import { createScroom } from "scroom";
 
 # Examples
 
@@ -19,10 +19,10 @@ Scroom is easy to use, what you achieve is up to your imagination.
     const ref = React.useRef();
     const [colors, setColors] = React.useState([0, 0, 0]);
     React.useEffect(() => {
-      const sc = setup({
+      const sc = createScroom({
         target: ref.current,
       });
-      sc.onProgress((progress) => {
+      sc.on("progress", ({ progress }) => {
         setColors([
           colors[0] + progress * 60,
           colors[1] + progress * 80,
@@ -51,10 +51,10 @@ Scroom is easy to use, what you achieve is up to your imagination.
       transform: "",
     });
     React.useEffect(() => {
-      const sc = setup({
+      const sc = createScroom({
         target: ref.current,
       });
-      sc.onProgress((progress) => {
+      sc.on("progress", ({ progress }) => {
         setStyle({
           radius: style.radius + 300 * progress,
           height: style.height + 150 * progress,

packages/website/src/introduction.mdx

@@ -30,15 +30,15 @@ $ npm install scroom
 ## Usage
 
 ```js
-import { setup } from "scroom";
+import { createScroom } from "scroom";
 
-const sc = setup({
+const sc = createScroom({
   target: document.querySelector(".target-element"),
   offset: 0.5,
 });
 
-sc.onProgress((progress) => {
-    ...
+sc.on("progress", (e) => {
+  console.log(e.progress);
 });
 ```
 

packages/website/src/usage-with-react.mdx

@@ -25,14 +25,15 @@ import { useScroom, useDebug } from "@scroom/react";
 import { useRef, useEffect } from "react";
 function App() {
   const ref = useRef();
-  const sc = useScroom(ref);
+  const sc = useScroom(ref, {
+    offset: 0.5,
+    onProgress(e) {
+      console.log(e.progress);
+    },
+  });
+
+  // if you want to debug
   useDebug(sc);
-  useEffect(() => {
-    // can be empty
-    if(sc) {
-      ...
-    }
-  }, [sc])
 
   return <div ref={ref}>...</div>;
 }
@@ -43,13 +44,12 @@ function App() {
 <Playground>
   {() => {
     const ref = React.useRef();
-    const sc = useScroom(ref);
+    const sc = useScroom(ref, {
+       onProgress(e) {
+        console.log(e.progress);
+      },
+    });
     useDebug(sc)
-    React.useEffect(() => {
-      if(sc) {
-        console.log(sc)
-      }
-    }, [sc])
     return <div ref={ref} style={{height: '30vh'}}/>;
 }}