@react-pakistan/util-functions 1.9.5 → 1.9.9

package/hooks/index.d.ts

@@ -1,2 +1,4 @@
-export * from './use-selector';
 export * from './use-change';
+export * from './use-selector';
+export * from './use-toggle-state';
+export * from './use-window-event-listener';

package/hooks/index.js

@@ -10,5 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./use-selector"), exports);
 __exportStar(require("./use-change"), exports);
+__exportStar(require("./use-selector"), exports);
+__exportStar(require("./use-toggle-state"), exports);
+__exportStar(require("./use-window-event-listener"), exports);

package/hooks/use-force-render.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A util hook to enable force renders.
+ *
+ * @returns dispatch without action
+ * @author Taimoor Khan
+ * @remarks
+ */
+/** End file docs */
+import { DispatchWithoutAction } from 'react';
+export declare const useForceRender: () => DispatchWithoutAction;

package/hooks/use-force-render.js

@@ -0,0 +1,17 @@
+"use strict";
+/**
+ * A util hook to enable force renders.
+ *
+ * @returns dispatch without action
+ * @author Taimoor Khan
+ * @remarks
+ */
+/** End file docs */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useForceRender = void 0;
+const react_1 = require("react");
+const useForceRender = () => {
+    const [, dispatch] = (0, react_1.useReducer)((s) => s + 1, 0);
+    return dispatch;
+};
+exports.useForceRender = useForceRender;

package/hooks/use-sticky.d.ts

@@ -0,0 +1,11 @@
+/**
+ * A util hook to stickyness in the app.
+ *
+ * @param offset - number of pixel which is offset
+ * @default offset = 0
+ * @returns isSticky as boolean
+ * @author Taimoor Khan
+ * @remarks
+ */
+/** End file docs */
+export declare const useSticky: (offset?: number) => boolean;

package/hooks/use-sticky.js

@@ -0,0 +1,39 @@
+"use strict";
+/**
+ * A util hook to stickyness in the app.
+ *
+ * @param offset - number of pixel which is offset
+ * @default offset = 0
+ * @returns isSticky as boolean
+ * @author Taimoor Khan
+ * @remarks
+ */
+/** End file docs */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSticky = void 0;
+/* eslint-disable consistent-return */
+const react_1 = require("react");
+const use_toggle_state_1 = require("./use-toggle-state");
+const useSticky = (offset = 0) => {
+    const [isSticky, setSticky, clearSticky] = (0, use_toggle_state_1.useToggleState)();
+    (0, react_1.useLayoutEffect)(() => {
+        const onScroll = () => {
+            window.requestAnimationFrame(() => {
+                if (window.pageYOffset > offset) {
+                    setSticky();
+                }
+                else {
+                    clearSticky();
+                }
+            });
+        };
+        if (window) {
+            window.addEventListener('scroll', onScroll);
+            return () => {
+                window.removeEventListener('scroll', onScroll);
+            };
+        }
+    }, [setSticky, offset, clearSticky]);
+    return isSticky;
+};
+exports.useSticky = useSticky;

package/hooks/use-toggle-state.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A util hook to enable toggle state.
+ *
+ * @param defaultValue as an initial state toggle value
+ * @default defaultValue as false
+ * @returns [state, toggleOn, toggleOff]
+ * @author Taimoor Khan
+ * @remarks
+ */
+/** End file docs */
+declare type ReturnType = [boolean, () => void, () => void];
+export declare const useToggleState: (defaultValue?: boolean) => ReturnType;
+export {};

package/hooks/use-toggle-state.js

@@ -0,0 +1,25 @@
+"use strict";
+/**
+ * A util hook to enable toggle state.
+ *
+ * @param defaultValue as an initial state toggle value
+ * @default defaultValue as false
+ * @returns [state, toggleOn, toggleOff]
+ * @author Taimoor Khan
+ * @remarks
+ */
+/** End file docs */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToggleState = void 0;
+const react_1 = require("react");
+const useToggleState = (defaultValue = false) => {
+    const [state, setState] = (0, react_1.useState)(defaultValue);
+    const toggleOn = (0, react_1.useCallback)(() => {
+        setState(true);
+    }, [setState]);
+    const toggleOff = (0, react_1.useCallback)(() => {
+        setState(false);
+    }, [setState]);
+    return [state, toggleOn, toggleOff];
+};
+exports.useToggleState = useToggleState;

package/hooks/use-window-event-listener.d.ts

@@ -0,0 +1 @@
+export declare const useWindowEventListener: <T extends keyof WindowEventMap>(eventName: T, callback: (event: WindowEventMap[T]) => void) => void;

package/hooks/use-window-event-listener.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWindowEventListener = void 0;
+const react_1 = require("react");
+const useWindowEventListener = (eventName, callback) => {
+    (0, react_1.useEffect)(() => {
+        window.addEventListener(eventName, callback);
+        return () => window.removeEventListener(eventName, callback);
+    }, [eventName, callback]);
+};
+exports.useWindowEventListener = useWindowEventListener;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-pakistan/util-functions",
-  "version": "1.9.5",
+  "version": "1.9.9",
   "description": "A library of all util functions",
   "main": "index.js",
   "scripts": {
@@ -11,7 +11,7 @@
     "generate:docs": "typedoc",
     "lint": "yarn lint:ts",
     "lint:staged": "lint-staged",
-    "lint:ts": "eslint --config .eslintrc --fix .",
+    "lint:ts": "eslint --config .eslintrc .",
     "major": "npm version major",
     "minor": "npm version minor",
     "patch": "npm version patch",
@@ -40,25 +40,25 @@
     "@microsoft/tsdoc": "^0.13.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.7",
-    "@babel/eslint-parser": "^7.16.5",
+    "@babel/core": "^7.17.0",
+    "@babel/eslint-parser": "^7.17.0",
     "@babel/preset-typescript": "^7.16.7",
-    "@react-pakistan/eslint-config-shared": "^1.4.10",
+    "@react-pakistan/eslint-config-shared": "^1.4.12",
     "@types/jest": "^27.4.0",
-    "@types/node": "^17.0.8",
+    "@types/node": "^17.0.15",
     "@types/react-redux": "^7.1.22",
-    "@types/styled-components": "^5.1.20",
-    "eslint": "^8.6.0",
+    "@types/styled-components": "^5.1.21",
+    "eslint": "^8.8.0",
     "husky": "^7.0.4",
-    "jest": "^27.4.7",
-    "lint-staged": "^12.1.7",
+    "jest": "^27.5.0",
+    "lint-staged": "^12.3.3",
     "lodash.isequal": "^4.5.0",
     "react": "^17.0.2",
     "react-redux": "^7.2.6",
     "rimraf": "^3.0.2",
-    "ts-jest": "^27.1.2",
+    "ts-jest": "^27.1.3",
     "ts-loader": "^9.2.6",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.5"
   },
   "peerDependencies": {
     "@types/react-redux": "^7.1.22",