@csshero/usehooks 0.1.0

package/dist/useTimeout/demo/demo2.js

@@ -0,0 +1,43 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 案例
+ * description: 动态修改 delay 以实现定时器间隔变化与暂停。
+ */
+
+import { useTimeout } from "../..";
+import React, { useState } from 'react';
+var DemoTwo = function DemoTwo() {
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    count = _useState2[0],
+    setCount = _useState2[1];
+  var _useState3 = useState(2000),
+    _useState4 = _slicedToArray(_useState3, 2),
+    delay = _useState4[0],
+    setDelay = _useState4[1];
+  var clear = useTimeout(function () {
+    setCount(count + 1);
+  }, delay);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "count: ", count), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: '8px'
+    }
+  }, "delay: ", delay), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return setDelay(delay + 1000);
+    }
+  }, "delay + 1000"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return setDelay(2000);
+    },
+    style: {
+      margin: '0 8px'
+    }
+  }, "reset delay"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: clear
+  }, "clear"));
+};
+export default DemoTwo;

package/dist/useTimeout/index.d.ts

@@ -0,0 +1,3 @@
+type FnType = () => void;
+declare const useTimeout: (callback: FnType, delay?: number) => FnType;
+export default useTimeout;

package/dist/useTimeout/index.js

@@ -0,0 +1,22 @@
+import { useCallback, useEffect, useRef } from 'react';
+var useTimeout = function useTimeout(callback) {
+  var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
+  var timer = useRef();
+  var callbackRef = useRef(callback);
+  var clearFn = useCallback(function () {
+    return clearTimeout(timer.current);
+  }, []);
+
+  // 更新 ref 中的 callback
+  useEffect(function () {
+    callbackRef.current = callback;
+  }, [callback]);
+  useEffect(function () {
+    timer.current = setTimeout(function () {
+      callbackRef.current();
+    }, delay);
+    return clearFn;
+  }, [delay]);
+  return clearFn;
+};
+export default useTimeout;

package/dist/useToggle/demo/demo1.d.ts

@@ -0,0 +1,7 @@
+/**
+ * title: 案例
+ * description: 当不接收任何参数时，默认为 boolean 切换，其中默认值为 false。
+ */
+import { FC } from 'react';
+declare const DemoOne: FC;
+export default DemoOne;

package/dist/useToggle/demo/demo1.js

@@ -0,0 +1,32 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 案例
+ * description: 当不接收任何参数时，默认为 boolean 切换，其中默认值为 false。
+ */
+
+import { useToggle } from "../..";
+import React from 'react';
+var DemoOne = function DemoOne() {
+  var _useToggle = useToggle(false),
+    _useToggle2 = _slicedToArray(_useToggle, 2),
+    value = _useToggle2[0],
+    action = _useToggle2[1];
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: '8px'
+    }
+  }, "Effects: ", value.toString()), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: action.toggle
+  }, "toggle"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: action.setToDefault,
+    style: {
+      margin: '0 8px'
+    }
+  }, "setDefalut"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: action.setToReverse
+  }, "setReverse"));
+};
+export default DemoOne;

package/dist/useToggle/demo/demo2.d.ts

@@ -0,0 +1,7 @@
+/**
+ * title: 案例
+ * description: 接受两个可选参数，在它们之间进行切换。
+ */
+import { FC } from 'react';
+declare const DemoThree: FC;
+export default DemoThree;

package/dist/useToggle/demo/demo2.js

@@ -0,0 +1,45 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 案例
+ * description: 接受两个可选参数，在它们之间进行切换。
+ */
+
+import { useToggle } from "../..";
+import React from 'react';
+var DemoThree = function DemoThree() {
+  var _useToggle = useToggle('Hello', 'World'),
+    _useToggle2 = _slicedToArray(_useToggle, 2),
+    value = _useToggle2[0],
+    action = _useToggle2[1];
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: '8px'
+    }
+  }, "Effects: ", value.toString()), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: action.toggle
+  }, "toggle"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: action.setToDefault,
+    style: {
+      margin: '0 8px'
+    }
+  }, "setDefalut"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: action.setToReverse
+  }, "setReverse"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return action.set('Hello');
+    },
+    style: {
+      margin: '0 8px'
+    }
+  }, "setHello"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return action.set('World');
+    }
+  }, "setWorld"));
+};
+export default DemoThree;

package/dist/useToggle/demo/demo3.d.ts

@@ -0,0 +1,7 @@
+/**
+ * title: 案例
+ * description: 接受一个可选参数，取反时设置为!defaultValue。
+ */
+import { FC } from 'react';
+declare const DemoTwo: FC;
+export default DemoTwo;

package/dist/useToggle/demo/demo3.js

@@ -0,0 +1,32 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 案例
+ * description: 接受一个可选参数，取反时设置为!defaultValue。
+ */
+
+import { useToggle } from "../..";
+import React from 'react';
+var DemoTwo = function DemoTwo() {
+  var _useToggle = useToggle('true'),
+    _useToggle2 = _slicedToArray(_useToggle, 2),
+    value = _useToggle2[0],
+    action = _useToggle2[1];
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: '8px'
+    }
+  }, "Effects: ", value.toString()), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: action.toggle
+  }, "toggle"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: action.setToDefault,
+    style: {
+      margin: '0 8px'
+    }
+  }, "setDefalut"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: action.setToReverse
+  }, "setReverse"));
+};
+export default DemoTwo;

package/dist/useToggle/index.d.ts

@@ -0,0 +1,10 @@
+interface Actions<T> {
+    set: (value: T) => void;
+    setToDefault: () => void;
+    setToReverse: () => void;
+    toggle: () => void;
+}
+declare function useToggle(): [boolean, Actions<boolean>];
+declare function useToggle<T>(defaultValue: T): [T, Actions<T>];
+declare function useToggle<T, R>(defaultValue: T, reverseValue: R): [T, Actions<T | R>];
+export default useToggle;

package/dist/useToggle/index.js

@@ -0,0 +1,35 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useMemo, useState } from 'react';
+function useToggle() {
+  var defaultValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var reverseValue = arguments.length > 1 ? arguments[1] : undefined;
+  var _useState = useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var actions = useMemo(function () {
+    var reverseValueOrigin = reverseValue === undefined ? !defaultValue : reverseValue;
+    var toggle = function toggle() {
+      setValue(function (v) {
+        return v === defaultValue ? reverseValueOrigin : defaultValue;
+      });
+    };
+    var setToDefault = function setToDefault() {
+      return setValue(defaultValue);
+    };
+    var setToReverse = function setToReverse() {
+      return setValue(reverseValueOrigin);
+    };
+    var set = function set(v) {
+      return setValue(v);
+    };
+    return {
+      toggle: toggle,
+      setToDefault: setToDefault,
+      setToReverse: setToReverse,
+      set: set
+    };
+  }, []);
+  return [value, actions];
+}
+export default useToggle;

package/dist/useUnmount/demo/demo1.d.ts

@@ -0,0 +1,7 @@
+/**
+ * title: 案例
+ * description: 在组件卸载时，执行函数。
+ */
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/useUnmount/demo/demo1.js

@@ -0,0 +1,24 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 案例
+ * description: 在组件卸载时，执行函数。
+ */
+
+import { useBoolean, useUnmount } from "../..";
+import React from 'react';
+var MyComponent = function MyComponent() {
+  useUnmount(function () {
+    alert('组件卸载，执行传入函数。');
+  });
+  return /*#__PURE__*/React.createElement("p", null, "Hello World!");
+};
+export default (function () {
+  var _useBoolean = useBoolean(true),
+    _useBoolean2 = _slicedToArray(_useBoolean, 2),
+    state = _useBoolean2[0],
+    toggle = _useBoolean2[1].toggle;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: toggle
+  }, state ? '卸载组件' : '挂载组件'), state && /*#__PURE__*/React.createElement(MyComponent, null));
+});

package/dist/useUnmount/index.d.ts

@@ -0,0 +1,2 @@
+declare const useUnmount: (callback: () => void) => void;
+export default useUnmount;

package/dist/useUnmount/index.js

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+import useLatest from "../useLatest";
+var useUnmount = function useUnmount(callback) {
+  var CallbackRef = useLatest(callback);
+
+  // 返回值中调用fn的最新值
+  useEffect(function () {
+    return function () {
+      return CallbackRef.current();
+    };
+  }, []);
+};
+export default useUnmount;

package/dist/useUpdate/demo/demo1.d.ts

@@ -0,0 +1,7 @@
+/**
+ * title: 基础用法
+ * desc: 强制组件重新渲染。
+ */
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/useUpdate/demo/demo1.js

@@ -0,0 +1,17 @@
+/**
+ * title: 基础用法
+ * desc: 强制组件重新渲染。
+ */
+
+import { useUpdate } from "../..";
+import React from 'react';
+export default (function () {
+  var update = useUpdate();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, "Time: ", Date.now()), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: update,
+    style: {
+      marginTop: 8
+    }
+  }, "update"));
+});

package/dist/useUpdate/index.d.ts

@@ -0,0 +1,2 @@
+declare const useUpdate: () => () => void;
+export default useUpdate;

package/dist/useUpdate/index.js

@@ -0,0 +1,13 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useState } from 'react';
+import useMemoizedFn from "../useMemoizedFn";
+var useUpdate = function useUpdate() {
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    setState = _useState2[1];
+  var updata = useMemoizedFn(function () {
+    return setState({});
+  });
+  return updata;
+};
+export default useUpdate;

package/dist/utils/isSameDep.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const isSameDep: (oldDep: import("react").DependencyList, newDep: import("react").DependencyList) => boolean;
+export default isSameDep;

package/dist/utils/isSameDep.js

@@ -0,0 +1,7 @@
+var isSameDep = function isSameDep(oldDep, newDep) {
+  if (oldDep.length !== newDep.length) return false;
+  return oldDep.every(function (item, index) {
+    return Object.is(item, newDep[index]);
+  });
+};
+export default isSameDep;

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@csshero/usehooks",
+  "version": "0.1.0",
+  "description": "a react hooks library",
+  "license": "MIT",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "father build",
+    "build:watch": "father dev",
+    "dev": "dumi dev",
+    "docs:build": "dumi build",
+    "docs:preview": "dumi preview",
+    "doctor": "father doctor",
+    "lint": "pnpm run lint:es && pnpm run lint:css",
+    "lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
+    "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
+    "prepare": "husky install && dumi setup",
+    "prepublishOnly": "father doctor && pnpm run build",
+    "start": "pnpm run dev"
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "lint-staged": {
+    "*.{md,json}": [
+      "prettier --write --no-error-on-unmatched-pattern"
+    ],
+    "*.{css,less}": [
+      "stylelint --fix",
+      "prettier --write"
+    ],
+    "*.{js,jsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --parser=typescript --write"
+    ]
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.26.0",
+    "lodash-es": "^4.17.21"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.1.2",
+    "@commitlint/config-conventional": "^17.1.0",
+    "@types/lodash-es": "^4.17.12",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@umijs/lint": "^4.0.0",
+    "dumi": "^2.4.13",
+    "dumi-theme-antd-style": "^0.31.1",
+    "eslint": "^8.23.0",
+    "father": "^4.1.0",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1",
+    "prettier-plugin-organize-imports": "^3.0.0",
+    "prettier-plugin-packagejson": "^2.2.18",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "stylelint": "^14.9.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": [
+    "cssheo"
+  ]
+}