rc-hooks - npm Package Compare versions

Comparing version 0.4.2 to 0.5.0

lib/index.js

 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "./useAsync", "./useClientRect", "./usePrevious", "./usePersistFn", "./useUpdateEffect", "./useUnmount", "./useMount", "./useDebounceFn", "./useDebounce", "./useThrottleFn", "./useThrottle"], factory);
+    define(["exports", "./useAsync", "./useDebounceFn", "./useDebounce", "./useThrottleFn", "./useThrottle", "./useMount", "./useUnmount", "./useUpdate", "./useUpdateEffect", "./useUpdateLayoutEffect", "./useClientRect", "./usePrevious", "./usePersistFn"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("./useAsync"), require("./useClientRect"), require("./usePrevious"), require("./usePersistFn"), require("./useUpdateEffect"), require("./useUnmount"), require("./useMount"), require("./useDebounceFn"), require("./useDebounce"), require("./useThrottleFn"), require("./useThrottle"));
+    factory(exports, require("./useAsync"), require("./useDebounceFn"), require("./useDebounce"), require("./useThrottleFn"), require("./useThrottle"), require("./useMount"), require("./useUnmount"), require("./useUpdate"), require("./useUpdateEffect"), require("./useUpdateLayoutEffect"), require("./useClientRect"), require("./usePrevious"), require("./usePersistFn"));
   } else {
@@ -10,6 +10,6 @@ var mod = {
     };
-    factory(mod.exports, global.useAsync, global.useClientRect, global.usePrevious, global.usePersistFn, global.useUpdateEffect, global.useUnmount, global.useMount, global.useDebounceFn, global.useDebounce, global.useThrottleFn, global.useThrottle);
+    factory(mod.exports, global.useAsync, global.useDebounceFn, global.useDebounce, global.useThrottleFn, global.useThrottle, global.useMount, global.useUnmount, global.useUpdate, global.useUpdateEffect, global.useUpdateLayoutEffect, global.useClientRect, global.usePrevious, global.usePersistFn);
     global.rcHooks = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _useAsync, _useClientRect, _usePrevious, _usePersistFn, _useUpdateEffect, _useUnmount, _useMount, _useDebounceFn, _useDebounce, _useThrottleFn, _useThrottle) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _useAsync, _useDebounceFn, _useDebounce, _useThrottleFn, _useThrottle, _useMount, _useUnmount, _useUpdate, _useUpdateEffect, _useUpdateLayoutEffect, _useClientRect, _usePrevious, _usePersistFn) {
   "use strict";
@@ -26,26 +26,32 @@
   });
-  Object.defineProperty(_exports, "useClientRect", {
+  Object.defineProperty(_exports, "useDebounceFn", {
     enumerable: true,
     get: function get() {
-      return _useClientRect["default"];
+      return _useDebounceFn["default"];
     }
   });
-  Object.defineProperty(_exports, "usePrevious", {
+  Object.defineProperty(_exports, "useDebounce", {
     enumerable: true,
     get: function get() {
-      return _usePrevious["default"];
+      return _useDebounce["default"];
     }
   });
-  Object.defineProperty(_exports, "usePersistFn", {
+  Object.defineProperty(_exports, "useThrottleFn", {
     enumerable: true,
     get: function get() {
-      return _usePersistFn["default"];
+      return _useThrottleFn["default"];
     }
   });
-  Object.defineProperty(_exports, "useUpdateEffect", {
+  Object.defineProperty(_exports, "useThrottle", {
     enumerable: true,
     get: function get() {
-      return _useUpdateEffect["default"];
+      return _useThrottle["default"];
     }
   });
+  Object.defineProperty(_exports, "useMount", {
+    enumerable: true,
+    get: function get() {
+      return _useMount["default"];
+    }
+  });
   Object.defineProperty(_exports, "useUnmount", {
@@ -57,39 +63,39 @@ enumerable: true,
   });
-  Object.defineProperty(_exports, "useMount", {
+  Object.defineProperty(_exports, "useUpdate", {
     enumerable: true,
     get: function get() {
-      return _useMount["default"];
+      return _useUpdate["default"];
     }
   });
-  Object.defineProperty(_exports, "useDebounceFn", {
+  Object.defineProperty(_exports, "useUpdateEffect", {
     enumerable: true,
     get: function get() {
-      return _useDebounceFn["default"];
+      return _useUpdateEffect["default"];
     }
   });
-  Object.defineProperty(_exports, "useDebounce", {
+  Object.defineProperty(_exports, "useUpdateLayoutEffect", {
     enumerable: true,
     get: function get() {
-      return _useDebounce["default"];
+      return _useUpdateLayoutEffect["default"];
     }
   });
-  Object.defineProperty(_exports, "useThrottleFn", {
+  Object.defineProperty(_exports, "useClientRect", {
     enumerable: true,
     get: function get() {
-      return _useThrottleFn["default"];
+      return _useClientRect["default"];
     }
   });
-  Object.defineProperty(_exports, "useThrottle", {
+  Object.defineProperty(_exports, "usePrevious", {
     enumerable: true,
     get: function get() {
-      return _useThrottle["default"];
+      return _usePrevious["default"];
     }
   });
+  Object.defineProperty(_exports, "usePersistFn", {
+    enumerable: true,
+    get: function get() {
+      return _usePersistFn["default"];
+    }
+  });
   _useAsync = _interopRequireDefault(_useAsync);
-  _useClientRect = _interopRequireDefault(_useClientRect);
-  _usePrevious = _interopRequireDefault(_usePrevious);
-  _usePersistFn = _interopRequireDefault(_usePersistFn);
-  _useUpdateEffect = _interopRequireDefault(_useUpdateEffect);
-  _useUnmount = _interopRequireDefault(_useUnmount);
-  _useMount = _interopRequireDefault(_useMount);
   _useDebounceFn = _interopRequireDefault(_useDebounceFn);
@@ -99,4 +105,12 @@ _useDebounce = _interopRequireDefault(_useDebounce);
   _useThrottle = _interopRequireDefault(_useThrottle);
+  _useMount = _interopRequireDefault(_useMount);
+  _useUnmount = _interopRequireDefault(_useUnmount);
+  _useUpdate = _interopRequireDefault(_useUpdate);
+  _useUpdateEffect = _interopRequireDefault(_useUpdateEffect);
+  _useUpdateLayoutEffect = _interopRequireDefault(_useUpdateLayoutEffect);
+  _useClientRect = _interopRequireDefault(_useClientRect);
+  _usePrevious = _interopRequireDefault(_usePrevious);
+  _usePersistFn = _interopRequireDefault(_usePersistFn);
 
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 });

lib/useAsync/index.js

@@ -55,3 +55,3 @@ (function (global, factory) {
   // TODO：
-  // 1.有缓存时，不重新请求，获取缓存时判断params是否相同，长缓存
+  // 1.有缓存时，不重新请求，获取缓存时判断params是否相同，长缓存?
   // 2.refreshDeps？
@@ -278,3 +278,6 @@ // 3.考虑分页、的情况？
       if (autoRun) {
-        run.apply(void 0, _toConsumableArray(defaultParams));
+        // 参数兼容非array的情况
+        var _params = Array.isArray(defaultParams) ? defaultParams : [defaultParams];
+
+        run.apply(void 0, _toConsumableArray(_params));
       } // 订阅页面显示时轮询
@@ -281,0 +284,0 @@

lib/useUpdateEffect/index.js

@@ -21,3 +21,4 @@ (function (global, factory) {
 
-  var useUpdateEffect = function useUpdateEffect(effect, deps) {
+  var useUpdateEffect = function useUpdateEffect(effect) {
+    var deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
     var isMounted = (0, _react.useRef)(false);
@@ -24,0 +25,0 @@ (0, _react.useEffect)(function () {

package.json

 {
   "name": "rc-hooks",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "React Hooks Library.",
@@ -8,3 +8,5 @@ "main": "lib/index.js",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rm -rf lib && babel src --out-dir lib --ignore 'src/**/demo/**/*'"
+    "build": "rm -rf lib && babel src --out-dir lib --ignore 'src/**/demo/**/*','src/**/*.md','src/.umi'",
+    "dev": "npx dumi dev",
+    "build:doc": "npx dumi build"
   },
@@ -32,7 +34,10 @@ "repository": {
     "@babel/core": "^7.9.0",
+    "@babel/plugin-transform-modules-umd": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
-    "@babel/preset-react": "^7.9.1",
-    "@babel/plugin-transform-modules-umd": "^7.9.0",
-    "chai": "^4.2.0",
-    "mocha": "^7.1.1"
+    "@babel/preset-react": "^7.9.4",
+    "antd": "^4.1.0",
+    "babel-plugin-import": "^1.13.0",
+    "dumi": "^1.0.13",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
@@ -70,2 +75,2 @@ "peerDependencies": {
   }
-}
+}

README.md

@@ -5,3 +5,3 @@ # rc-hooks
 
-[查看示例](https://doly-dev.github.io/rc-hooks/demo/)
+[查看文档和示例][site]
 
@@ -12,2 +12,4 @@ ## 安装
 npm install rc-hooks
+# or
+yarn install rc-hooks
 ```
@@ -42,351 +44,37 @@
 
-- [useAsync](#useAsync) - 管理异步函数，支持自动/手动调用、轮询、防抖、节流、缓存等特性。
-- [useClientRect](#useClientRect) - 获取元素的大小及其相对于视口的位置。
-- [usePrevious](#usePrevious) - 获取上一轮的 props 或 state。
-- [usePersistFn](#usePersistFn) - 持久化 function 的 Hook。
-- [useUpdateEffect](#useUpdateEffect) - 一个只在依赖更新时执行的 useEffect hook。
-- [useUnmount](#useUnmount) - 只在组件 unmount 时执行的 hook
-- [useMount](#useMount) - 只在组件 mount 时执行的 hook
-- [useDebounceFn](#useDebounceFn) - 用来处理防抖函数的 Hook。
-- [useDebounce](#useDebounce) - 用来处理防抖值的 Hook。
-- [useThrottleFn](#useThrottleFn) - 用来处理节流函数的 Hook。
-- [useThrottle](#useThrottle) - 用来处理节流值的 Hook。
+- Async
+  - [useAsync] - 管理异步函数
+- SideEffect
+  - [useDebounce] - 用来处理防抖值
+  - [useThrottle] - 用来处理节流值
+  - [useDebounceFn] - 用来处理防抖函数
+  - [useThrottleFn] - 用来处理节流函数
+- LifeCycle
+  - [useMount] - 只在组件 mount 时执行
+  - [useUpdate] - 强制组件重新渲染
+  - [useUnmount] - 只在组件 unmount 时执行
+  - [useUpdateEffect] - 只在依赖更新时执行的 useEffect
+  - [useUpdateLayoutEffect] - 只在依赖更新时执行的 useLayoutEffect
+- Other
+  - [usePrevious] - 保存上一次渲染时状态
+  - [usePersistFn] - 持久化 function
+  - [useClientRect] - 获取元素的大小及其相对于视口的位置
 
-### useAsync
+[site]: https://doly-dev.github.io/rc-hooks/site/0.x/
 
-管理异步函数，支持自动/手动调用、轮询、防抖、节流、缓存等特性。
+[useAsync]: https://doly-dev.github.io/rc-hooks/site/0.x/#/async/use-async
 
-```
-const {
-  data,
-  error,
-  loading,
-  params,
-  run,
-  cancel,
-  refresh,
-  mutate
-} = useAsync(asyncFn, {
-  autoRun,
-  initialData,
-  defaultParams,
-  onSuccess,
-  onError,
-  cacheKey,
-  cacheTime,
-  loadingDelay,
-  pollingInterval,
-  pollingWhenHidden,
-  refreshOnWindowFocus,
-  focusTimespan,
-  debounceInterval,
-  throttleInterval,
-});
-```
+[useDebounce]: https://doly-dev.github.io/rc-hooks/site/0.x/#/side-effect/use-debounce
+[useThrottle]: https://doly-dev.github.io/rc-hooks/site/0.x/#/side-effect/use-throttle
+[useDebounceFn]: https://doly-dev.github.io/rc-hooks/site/0.x/#/side-effect/use-debounce-fn
+[useThrottleFn]: https://doly-dev.github.io/rc-hooks/site/0.x/#/side-effect/use-throttle-fn
 
-#### Result
+[useMount]: https://doly-dev.github.io/rc-hooks/site/0.x/#/life-cycle/use-mount
+[useUpdate]: https://doly-dev.github.io/rc-hooks/site/0.x/#/life-cycle/use-update
+[useUnmount]: https://doly-dev.github.io/rc-hooks/site/0.x/#/life-cycle/use-unmount
+[useUpdateEffect]: https://doly-dev.github.io/rc-hooks/site/0.x/#/life-cycle/use-update-effect
+[useUpdateLayoutEffect]: https://doly-dev.github.io/rc-hooks/site/0.x/#/life-cycle/use-update-layout-effect
 
-参数 | 说明 | 类型
-------------- | ------------- | -------------
-data  | 异步函数的返回值，默认为 `undefined`。 | `undefined` / `any`
-error  | 异步函数抛出的异常，默认为 `undefined` | `undefined` / `any`
-loading  | 异步函数正在执行 | `boolean`
-params  | 执行service的参数数组。比如你触发了 run(1, 2, 3)，则 params 等于 [1, 2, 3] | `array`
-run  | 手动触发异步函数。debounce 模式与throttle 模式返回值为 `Promise<null>` | `function`
-cancel  | 取消当前请求。如果有轮询，停止。 | `function`
-refresh  | 使用上一次的params，重新执行异步函数。 | `function`
-mutate  | 直接修改data | `(newData) => void` / `((oldData)=>newData)=>void`
-
-#### Params
-
-所有配置项都是可选的。
-
-参数 | 说明 | 类型 | 默认值
-------------- | ------------- | ------------- | -------------
-autoRun  | 默认 `true`。即在初始化时自动执行异步函数。如果设置为 `false`，则需要手动调用 `run` 触发执行。 | `boolean` | true
-initialData  | 默认的 `data`。 | `any` | -
-defaultParams  | 如果 `autoRun=true` 自动执行 `run` 的默认参数。 |  `any[]`  | -
-onSuccess  | 异步函数 `resolve` 时触发，参数为 `data` 和 `params`。 | `(data: any, params: any[]) => void` | -
-onError  | 异步函数报错时触发，参数为 `error` 和 `params` | `(error: any, parmams: any[]) => void` | -
-cacheKey  | 缓存的键值，启用缓存机制。异步成功结果，将被缓存。 | `string` | -
-cacheTime  | 缓存时间，单位为毫秒。 | `number` | `5 * 60 * 1000`
-loadingDelay  | 设置 `loading` 延迟时间，避免闪烁，单位为毫秒。| `number` | -
-pollingInterval | 轮询间隔，单位为毫秒。设置后，将进入轮询模式，定时触发 `run` | `number`  | -
-refreshOnWindowFocus  | 在屏幕重新获取焦点或重新显示时，是否重新发起请求。默认为 false，即不会重新发起请求。如果设置为 true，在屏幕重新聚焦或重新显示时，会重新发起请求。
- | `boolean` | `false`
-focusTimespan  | 屏幕重新聚焦，如果每次都重新发起请求，不是很好，我们需要有一个时间间隔，在当前时间间隔内，不会重新发起请求。需要配置 refreshOnWindowFocus 使用。 | `number` | `5000`
-debounceInterval  | 防抖间隔, 单位为毫秒，设置后，请求进入防抖模式。 | `number` | -
-throttleInterval  | 节流间隔, 单位为毫秒，设置后，请求进入节流模式。 | `number` | -
-
-
-### useClientRect
-
-获取元素的大小及其相对于视口的位置。
-
-```
-import React from "react";
-import { useClientRect } from "rc-hooks";
-
-export default function MeasureExample() {
-  const [rect, ref] = useClientRect();
-
-  return (
-    <>
-      <h1 ref={ref}>Hello, world</h1>
-      {rect !== null &&
-        <h2>The above header is {Math.round(rect.height)}px tall</h2>
-      }
-    </>
-  );
-}
-```
-
-
-### usePrevious
-
-获取上一轮的 props 或 state。
-
-```
-import React, { useState } from "react";
-import { usePrevious } from "rc-hooks";
-
-export default function Counter() {
-  const [count, setCount] = useState(0);
-  const prevCount = usePrevious(count);
-
-  const handleInput = (e) => {
-    setCount(e.target.value);
-  }
-
-  return (
-    <>
-      <h1>Now: {count}, before: {prevCount}</h1>
-      <input type="text" onInput={handleInput} />
-    </>
-  );
-}
-```
-
-### usePersistFn
-
-持久化 function 的 Hook。
-
-```
-// https://zh-hans.reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
-import React, { useState } from "react";
-import { usePersistFn } from "rc-hooks";
-
-export default function Form() {
-  const [text, updateText] = useState('');
-
-  const handleSubmit = usePersistFn(() => {
-    alert(text);
-  });
-
-  return (
-    <>
-      <input value={text} onChange={e => updateText(e.target.value)} />
-      <div onClick={handleSubmit}>Alert</div>
-    </>
-  );
-}
-```
-
-### useUpdateEffect
-
-一个只在依赖更新时执行的 useEffect hook。
-
-```
-import React, { useLayoutEffect, useState } from 'react';
-import { useUpdateEffect } from 'rc-hooks';
-
-export default () => {
-  const [count, setCount] = useState(0);
-  const [effectCount, setEffectCount] = useState(0);
-  const [updateEffectCount, setUpdateEffectCount] = useState(0);
-
-  useLayoutEffect(() => {
-    setEffectCount(c => c + 1);
-  }, [count]);
-
-  useUpdateEffect(() => {
-    setUpdateEffectCount(c => c + 1);
-    return () => {
-      // do something
-    };
-  }, [count]); // you can include deps array if necessary
-
-  return (
-    <div>
-      <p>effectCount: {effectCount}</p>
-      <p>updateEffectCount: {updateEffectCount}</p>
-      <p>
-        <button onClick={() => setCount(c => c + 1)}>
-          reRender
-        </button>
-      </p>
-    </div>
-  );
-};
-```
-
-### useUnmount
-
-只在组件 unmount 时执行的 hook
-
-```
-import React, { useState } from 'react';
-import { Button, message } from 'antd';
-import { useUnmount } from 'rc-hooks';
-
-const MyComponent = () => {
-  useUnmount(
-    () => {
-      message.info('unmount');
-    }
-  );
-
-  return (<div>Hello World</div>)
-}
-
-export default () => {
-  const [state, toggle] = useState(true);
-
-  return (<>
-    <Button onClick={() => toggle(s => !s)}>{state ? 'unmount' : 'mount'}</Button>
-    {state && <MyComponent />}
-  </>);
-};
-```
-
-### useMount
-
-只在组件 mount 时执行的 hook
-
-```
-import React, { useState } from 'react';
-import { Button, message } from 'antd';
-import { useMount } from 'rc-hooks';
-
-const MyComponent = () => {
-  useMount(
-    () => {
-      message.info('mount');
-    }
-  );
-
-  return (<div>Hello World</div>)
-}
-
-export default () => {
-  const [state, toggle] = useState(false);
-
-  return (<>
-    <Button onClick={() => toggle(s => !s)}>{state ? 'unmount' : 'mount'}</Button>
-    {state && <MyComponent />}
-  </>);
-};
-```
-
-### useDebounceFn
-
-用来处理防抖函数的 Hook。
-
-```
-import React, { useState } from 'react';
-import { Button } from 'antd';
-import { useDebounceFn } from 'rc-hooks';
-
-export default () => {
-  const [value, setValue] = useState(0);
-  const { run } = useDebounceFn(setValue, 500);
-
-  return (
-    <div>
-      <p style={{ marginTop: 16 }}> Clicked count: {value} </p>
-      <Button onClick={() => run(value + 1)}>Click fast!</Button>
-    </div>
-  );
-};
-```
-
-### useDebounce
-
-用来处理防抖值的 Hook。
-
-```
-import { Input } from 'antd';
-import React, { useState } from 'react';
-import { useDebounce } from 'rc-hooks';
-
-export default () => {
-  const [value, setValue] = useState();
-  const debouncedValue = useDebounce(value, 500);
-
-  return (
-    <div>
-      <Input
-        value={value}
-        onChange={e => setValue(e.target.value)}
-        placeholder="Typed value"
-        style={{ width: 280 }}
-      />
-      <p style={{ marginTop: 16 }}>DebouncedValue: {debouncedValue}</p>
-    </div>
-  );
-};
-```
-
-### useThrottleFn
-
-用来处理节流函数的 Hook。
-
-```
-import React, { useState } from 'react';
-import { Button } from 'antd';
-import { useThrottleFn } from 'rc-hooks';
-
-export default () => {
-  const [value, setValue] = useState(0);
-  const { run } = useThrottleFn(setValue, 500);
-
-  return (
-    <div>
-      <p style={{ marginTop: 16 }}> Clicked count: {value} </p>
-      <Button onClick={() => { run(value + 1) }}>Click fast!</Button>
-    </div>
-  );
-};
-```
-
-### useThrottle
-
-用来处理节流值的 Hook。
-
-```
-import { Input } from 'antd';
-import React, { useState } from 'react';
-import { useThrottle } from 'rc-hooks';
-
-export default () => {
-  const [value, setValue] = useState();
-  const throttledValue = useThrottle(value, 500);
-
-  return (
-    <div>
-      <Input
-        value={value}
-        onChange={e => setValue(e.target.value)}
-        placeholder="Typed value"
-        style={{ width: 280 }}
-      />
-      <p style={{ marginTop: 16 }}>throttledValue: {throttledValue}</p>
-    </div>
-  );
-};
-```
-
-
-
-
-
+[usePrevious]: https://doly-dev.github.io/rc-hooks/site/0.x/#/other/use-previous
+[usePersistFn]: https://doly-dev.github.io/rc-hooks/site/0.x/#/other/use-persist-fn
+[useClientRect]: https://doly-dev.github.io/rc-hooks/site/0.x/#/other/use-client-rect

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

22

increased by10%

Lines of code

1055

increased by9.1%

Worsened metrics

Total package byte prevSize

50708

decreased by-5.19%

Dev dependency count

10

increased by42.86%

Number of lines in readme file

78

decreased by-80%

No dependency changes