hooks

Author: aldrinpvincent

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 aldrinpvincent
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,23 @@
+# react-use-custom-hooks
+
+A collection of react custom hooks
+
+# Installation
+
+```bash
+npm install --save react-use-custom-hooks
+yarn add react-use-custom-hooks
+```
+
+# Usage
+
+```ts
+import { useSafeState } from 'react-use-custom-hooks';
+```
+
+# Hooks list
+
+1. useDebounce
+2. useSafeState
+3. useIsMounted
+4. usePrevious

package.json

@@ -0,0 +1,71 @@
+{
+  "version": "0.1.3",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=10"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aldrinpvincent/react-use-custom-hooks"
+  },
+  "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build",
+    "test": "tsdx test --passWithNoTests",
+    "lint": "tsdx lint",
+    "prepare": "tsdx build",
+    "size": "size-limit",
+    "analyze": "size-limit --why"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "tsdx lint"
+    }
+  },
+  "prettier": {
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "name": "react-use-custom-hooks",
+  "author": "aldrinpvincent",
+  "module": "dist/react-custom-hooks.esm.js",
+  "description": "A collection of react custom hooks in typescript",
+  "size-limit": [
+    {
+      "path": "dist/react-custom-hooks.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/react-custom-hooks.esm.js",
+      "limit": "10 KB"
+    }
+  ],
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^7.0.8",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.11",
+    "husky": "^7.0.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "size-limit": "^7.0.8",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.5"
+  },
+  "keywords": [
+    "react custom hooks",
+    "typescript",
+    "memory leak"
+  ]
+}

src/index.ts

@@ -0,0 +1,7 @@
+import { useDebounce } from './useDebounce';
+import { useSafeState } from './useSafeState';
+import { useIsMounted } from './useIsMounted';
+import { usePrevious } from './usePrevious';
+import { useLegacyState } from './useLegacyState';
+
+export { useDebounce, useSafeState, useIsMounted, usePrevious, useLegacyState };

src/useDebounce.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+
+export function useDebounce<T>(value: T, delay: number = 500) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => clearTimeout(handler);
+  }, [delay, value]);
+
+  return debouncedValue;
+}

src/useIsMounted.ts

@@ -0,0 +1,15 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+export function useIsMounted() {
+  const mountedRef = useRef(false);
+  const isMounted = useCallback(() => mountedRef.current, []);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  return isMounted;
+}

src/useLegacyState.ts

@@ -0,0 +1,13 @@
+import { useReducer } from 'react';
+
+export function useLegacyState<T>(
+  initialState: T
+): [T, (value: Record<string, any>) => void] {
+  return useReducer(
+    (state: T, update: Record<string, any>) => ({
+      ...state,
+      ...update,
+    }),
+    initialState
+  );
+}

src/usePrevious.ts

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from 'react';
+
+export function usePrevious<T>(value: T): T {
+  // Store current value in ref
+  const ref: any = useRef<T>();
+
+  useEffect(() => {
+    // Update the value if it changes
+    ref.current = value;
+  }, [value]);
+
+  // return the previous value
+  return ref.current;
+}

src/useSafeState.ts

@@ -0,0 +1,18 @@
+import { useCallback, useState } from 'react';
+import { useIsMounted } from './useIsMounted';
+
+export function useSafeState<T>(initialState: T): [T, (value: T) => void] {
+  const isMounted = useIsMounted();
+  const [state, setState] = useState(initialState);
+
+  const safeSetState = useCallback(
+    (value: T) => {
+      if (isMounted()) {
+        setState(value);
+      }
+    },
+    [isMounted]
+  );
+
+  return [state, safeSetState];
+}

tsconfig.json

@@ -0,0 +1,35 @@
+{
+  // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
+  "include": ["src", "types"],
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["dom", "esnext"],
+    "importHelpers": true,
+    // output .d.ts declaration files for consumers
+    "declaration": true,
+    // output .js.map sourcemap files for consumers
+    "sourceMap": true,
+    // match output dir to input dir. e.g. dist/index instead of dist/src/index
+    "rootDir": "./src",
+    // stricter type-checking for stronger correctness. Recommended by TS
+    "strict": true,
+    // linter checks for common issues
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    // noUnused* overlap with @typescript-eslint/no-unused-vars, can disable if duplicative
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    // use Node's module resolution algorithm, instead of the legacy TS one
+    "moduleResolution": "node",
+    // transpile JSX to React.createElement
+    "jsx": "react",
+    // interop between ESM and CJS modules. Recommended by TS
+    "esModuleInterop": true,
+    // significant perf increase by skipping checking .d.ts files, particularly those in node_modules. Recommended by TS
+    "skipLibCheck": true,
+    // error out if import and file system have a casing mismatch. Recommended by TS
+    "forceConsistentCasingInFileNames": true,
+    // `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc`
+    "noEmit": true,
+  }
+}