docs: add useInViewport docs & demo

src/useInViewport/demo/demo1.tsx

@@ -0,0 +1,50 @@
+/**
+ * title: Default usage
+ * desc: Observe if the element is visible.
+ *
+ * title.zh-CN: 基础用法
+ * desc.zh-CN: 监听元素是否在可见区域内
+ */
+
+import { useInViewport, useRef } from '@any-hooks/solid'
+
+export default () => {
+  const [ref, setRef] = useRef<HTMLElement>(null)
+  const [inViewport] = useInViewport(ref)
+  return (
+    <div>
+      <div
+        style={{
+          width: '300px',
+          height: '300px',
+          overflow: 'scroll',
+          border: '1px solid',
+        }}
+      >
+        scroll here
+        <div style={{ height: '800px' }}>
+          <div
+            ref={setRef}
+            style={{
+              'border': '1px solid',
+              'height': '100px',
+              'width': '100px',
+              'text-align': 'center',
+              'margin-top': '80px',
+            }}
+          >
+            observer dom
+          </div>
+        </div>
+      </div>
+      <div
+        style={{
+          'margin-top': '16px',
+          'color': inViewport() ? '#87d068' : '#f50',
+        }}
+      >
+        inViewport: {inViewport() ? 'visible' : 'hidden'}
+      </div>
+    </div>
+  )
+}

src/useInViewport/demo/demo2.tsx

@@ -0,0 +1,57 @@
+/**
+ * title: Observe element visible area ratio
+ * desc: Pass in `options.threshold`, you can control the ratio to be triggered when the visible area reach every threshold. <br /> `options.root` can control the parent element, in this example, visible will not change relative to the browser viewport.
+ *
+ * title.zh-CN: 监听元素可见区域比例
+ * desc.zh-CN: 传入 `options.threshold`, 可以控制在可见区域达到该比例时触发 ratio 更新。<br /> `options.root` 可以控制相对父级元素，在这个例子中，不会相对浏览器视窗变化。
+ */
+
+import { useInViewport } from '@any-hooks/solid'
+
+export default () => {
+  const [inViewport, ratio] = useInViewport(
+    () => document.getElementById('children'),
+    {
+      threshold: [0, 0.25, 0.5, 0.75, 1],
+      root: () => document.getElementById('parent'),
+    },
+  )
+  return (
+    <div>
+      <div
+        style={{
+          width: '300px',
+          height: '300px',
+          overflow: 'scroll',
+          border: '1px solid',
+        }}
+        id="parent"
+      >
+        scroll here
+        <div style={{ height: '800px' }}>
+          <div
+            id="children"
+            style={{
+              'border': '1px solid',
+              'height': '100px',
+              'width': '100px',
+              'text-align': 'center',
+              'margin-top': '80px',
+            }}
+          >
+            observer dom
+          </div>
+        </div>
+      </div>
+      <div
+        style={{
+          'margin-top': '16px',
+          'color': inViewport() ? '#87d068' : '#f50',
+        }}
+      >
+        <p>inViewport: {inViewport() ? 'visible' : 'hidden'}</p>
+        <p>ratio: {ratio()}</p>
+      </div>
+    </div>
+  )
+}

src/useInViewport/demo/demo3.tsx

@@ -0,0 +1,97 @@
+/**
+ * title: Listening content scrolling selection menu
+ * desc: Pass the `callback` that is triggered when the callback of `IntersectionObserver` is called, so you can do some customization.
+ *
+ * title.zh-CN: 监听内容滚动选中菜单
+ * desc.zh-CN: 传入 `callback`, 使得 `IntersectionObserver` 的回调被调用时，用户可以做一些自定义操作。
+ */
+import { useInViewport, useRef } from '@any-hooks/solid'
+import { createSignal } from 'solid-js'
+
+const menus = ['menu-1', 'menu-2', 'menu-3'] as const
+const content = {
+  'menu-1': 'Content for menus 1',
+  'menu-2': 'Content for menus 2',
+  'menu-3': 'Content for menus 3',
+}
+
+export default () => {
+  const [menuRef, setMenuReF] = useRef<HTMLDivElement[]>([])
+
+  const [activeMenu, setActiveMenu] = createSignal(menus[0])
+
+  const callback = (entry: any) => {
+    if (entry.isIntersecting) {
+      const active = entry.target.getAttribute('id') || ''
+      setActiveMenu(active)
+    }
+  }
+
+  const handleMenuClick = (index: number) => {
+    const contentEl = document.getElementById('content-scroll')
+    const top = menuRef()[index]?.offsetTop
+
+    contentEl?.scrollTo({
+      top,
+      behavior: 'smooth',
+    })
+  }
+
+  useInViewport(menuRef(), {
+    callback,
+    root: () => document.getElementById('parent-scroll'),
+    rootMargin: '-50% 0px -50% 0px',
+  })
+
+  return (
+    <div
+      id="parent-scroll"
+      style={{
+        width: '300px',
+        height: '300px',
+        border: '1px solid',
+        display: 'flex',
+        overflow: 'hidden',
+      }}
+    >
+      <div style={{ 'width': '30%', 'background-color': '#f0f0f0' }}>
+        <ul style={{ 'list-style': 'none', 'padding': 0, 'margin': 0 }}>
+          {menus.map((menu, index) => (
+            <li
+              onClick={() => handleMenuClick(index)}
+              style={{
+                'padding': '10px',
+                'cursor': 'pointer',
+                'text-align': 'center',
+                'transition': 'background-color 0.2s ease-in-out',
+                'background-color': activeMenu() === menu ? '#e0e0e0' : '',
+              }}
+            >
+              {menu}
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div
+        id="content-scroll"
+        style={{ 'flex': 1, 'overflow-y': 'scroll', 'position': 'relative' }}
+      >
+        {menus.map((menu, index) => (
+          <div
+            ref={(el: HTMLDivElement) => setMenuReF(el, index)}
+            id={menu}
+            style={{
+              'display': 'flex',
+              'justify-content': 'center',
+              'align-items': 'center',
+              'height': '100%',
+              'font-size': '16px',
+            }}
+          >
+            {content[menu]}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

src/useInViewport/index.en-US.md

@@ -0,0 +1,53 @@
+# useInViewport
+
+Observe whether the element is in the visible area, and the visible area ratio of the element. More information refer to [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
+
+## Examples
+
+### Default usage
+
+<code src="./demo/demo1.tsx" />
+
+### Observe the visible area ratio of element
+
+<code src="./demo/demo2.tsx" />
+
+### Listening content scrolling selection menu
+
+<code src="./demo/demo3.tsx" />
+
+## API
+
+```typescript
+type Target = Element | (() => Element);
+
+const [inViewport, ratio] = useInViewport(
+  target: Target | Target[],
+  options?: Options
+);
+```
+
+### Params
+
+| Property | Description                        | Type                   | Default |
+| -------- | ---------------------------------- | ---------------------- | ------- |
+| target   | DOM elements, support array        | `Target` \| `Target[]` | -       |
+| options  | Setting                            | `Options`              | -       |
+
+### Options
+
+More information refer to [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+
+| Property   | Description                                                                                                                                                                       | Type                                                                                 | Default |
+| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | ------- |
+| threshold  | Either a single number or an array of numbers which indicate at what percentage of the target's visibility the ratio should be executed                                           | `number` \| `number[]`                                                               | -       |
+| rootMargin | Margin around the root                                                                                                                                                            | `string`                                                                             | -       |
+| root       | The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target. Defaults to the browser viewport if not specified or if null. | `Element` \| `Document` \| `() => (Element/Document)`  | -       |
+| callback   | Triggered when the callback of `IntersectionObserver` is called                                                                                                                   | `(entry: IntersectionObserverEntry) => void`                                         | -       |
+
+### Result
+
+| Property   | Description                                                                              | Type                     |
+| ---------- | ---------------------------------------------------------------------------------------- | ------------------------ |
+| inViewport | Is visible                                                                               | `boolean` \| `undefined` |
+| ratio      | Current visible ratio, updated every time the node set by `options.threshold` is reached | `number` \| `undefined`  |

src/useInViewport/index.zh-CN.md

@@ -0,0 +1,53 @@
+# useInViewport
+
+观察元素是否在可见区域，以及元素可见比例。更多信息参考 [Intersection Observer API](https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API)。
+
+## 代码演示
+
+### 基础用法
+
+<code src="./demo/demo1.tsx" />
+
+### 监听元素可见区域比例
+
+<code src="./demo/demo2.tsx" />
+
+### 监听内容滚动选中菜单
+
+<code src="./demo/demo3.tsx" />
+
+## API
+
+```typescript
+type Target = Element | (() => Element);
+
+const [inViewport, ratio] = useInViewport(
+  target: Target | Target[],
+  options?: Options
+);
+```
+
+### Params
+
+| 参数    | 说明                       | 类型                   | 默认值 |
+| ------- | -------------------------- | ---------------------- | ------ |
+| target  | DOM 节点，支持数组 | `Target` \| `Target[]` | -      |
+| options | 设置                       | `Options`              | -      |
+
+### Options
+
+更多信息参考 [Intersection Observer API](https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API)
+
+| 参数       | 说明                                                                                                          | 类型                                                                                 | 默认值 |
+| ---------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | ------ |
+| threshold  | 可以是单一的 number 也可以是 number 数组，target 元素和 root 元素相交程度达到该值的时候 ratio 会被更新        | `number` \| `number[]`                                                               | -      |
+| rootMargin | 根(root)元素的外边距                                                                                          | `string`                                                                             | -      |
+| root       | 指定根(root)元素，用于检查目标的可见性。必须是目标元素的父级元素，如果未指定或者为 null，则默认为浏览器视窗。 | `Element` \| `Document` \| `() => (Element/Document)`  | -      |
+| callback   | `IntersectionObserver` 的回调被调用时触发                                                                     | `(entry: IntersectionObserverEntry) => void`                                         | -      |
+
+### Result
+
+| 参数       | 说明                                                        | 类型                     |
+| ---------- | ----------------------------------------------------------- | ------------------------ |
+| inViewport | 是否可见                                                    | `boolean` \| `undefined` |
+| ratio      | 当前可见比例，在每次到达 `options.threshold` 设置节点时更新 | `number` \| `undefined`  |