urs - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/useRefState.d.ts

@@ -1,5 +0,7 @@
-import { MutableRefObject, Dispatch } from 'react';
-export declare const useRefState: ({ _blockOnUnmount, ...defaultState }?: {
-    _blockOnUnmount?: boolean | undefined;
-}) => [MutableRefObject<any>, Dispatch<any>];
+/**
+ * Determines if the given param is an object. {}
+ * @param obj
+ */
+export declare const isObject: (obj: any) => obj is object;
+export declare const useRefState: (defaultState: any, blockIfUnmounted?: boolean) => (import("react").MutableRefObject<any> | ((arg: any) => void))[];
 export default useRefState;

dist/useRefState.js

 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-exports.useRefState = (_a = {}) => {
-    var { _blockOnUnmount = true } = _a, defaultState = __rest(_a, ["_blockOnUnmount"]);
+/**
+ * Determines if the given param is an object. {}
+ * @param obj
+ */
+exports.isObject = (obj) => Object.prototype.toString.call(obj) === '[object Object]'; // eslint-disable-line
+const useMounted = () => {
     const mounted = react_1.useRef(false);
@@ -24,14 +17,16 @@ react_1.useEffect(() => {
     }, []);
-    const setState = react_1.useState(defaultState)[1];
-    const r = react_1.useRef(defaultState);
-    return [
-        r,
-        react_1.useCallback(arg => {
-            if (!mounted.current && _blockOnUnmount)
-                return;
-            r.current = (typeof arg === 'function') ? arg() : arg;
-            setState(arg);
-        }, [])
-    ];
+    return mounted;
 };
+exports.useRefState = (defaultState, blockIfUnmounted = true) => {
+    const mounted = useMounted();
+    const state = react_1.useRef(defaultState);
+    const setReactState = react_1.useState(state.current)[1];
+    const setState = react_1.useCallback(arg => {
+        if (!mounted.current && blockIfUnmounted)
+            return;
+        state.current = (typeof arg === 'function') ? arg(state.current) : arg;
+        setReactState(state.current);
+    }, []);
+    return [state, setState];
+};
 exports.default = exports.useRefState;

package.json

 {
   "name": "urs",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "🔥 React hook for maintaining correct values, in a clean way",
@@ -11,2 +11,3 @@ "main": "dist/useRefState.js",
     "build:production": "yarn build -p tsconfig.production.json",
+    "build:watch": "rm -rf dist && tsc -w --module CommonJS",
     "prepublishOnly": "yarn test && yarn build:production",
@@ -18,3 +19,3 @@ "test": "tsc -p . --noEmit && tsc -p . && jest --env=jsdom useRefState.test.ts",
     "type": "git",
-    "url": "git+https://github.com/alex-cory/use-ssr.git"
+    "url": "git+https://github.com/alex-cory/urs.git"
   },
@@ -90,3 +91,3 @@ "author": "Alex Cory <[e-mail]>",
   "bugs": {
-    "url": "https://github.com/alex-cory/use-ssr/issues"
+    "url": "https://github.com/alex-cory/urs/issues"
   },
@@ -106,3 +107,4 @@ "keywords": [
     "react hooks"
-  ]
+  ],
+  "dependencies": {}
 }

README.md

 <h1 align="center">useRefState</h1>
 <p align="center">🔥 React hook for maintaining correct values, in a clean way</p>
-<p>🚨 This hook is under active development. Do not use in production! 🚨</p>
-<!-- <p align="center">
-    <a href="https://github.com/alex-cory/use-ssr/pulls">
+<p align="center">
+    <a href="https://github.com/alex-cory/urs/pulls">
       <img src="https://camo.githubusercontent.com/d4e0f63e9613ee474a7dfdc23c240b9795712c96/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5052732d77656c636f6d652d627269676874677265656e2e737667" />
     </a>
-    <a href="https://www.npmjs.com/package/use-ssr">
-      <img src="https://img.shields.io/npm/dt/use-ssr.svg" />
+    <a href="https://www.npmjs.com/package/urs">
+      <img src="https://img.shields.io/npm/dt/urs.svg" />
     </a>
-    <a href="https://lgtm.com/projects/g/alex-cory/use-ssr/context:javascript">
-      <img src="https://img.shields.io/lgtm/grade/javascript/g/alex-cory/use-ssr.svg?logo=lgtm&logoWidth=18"/>
+    <a href="https://bundlephobia.com/result?p=urs">
+      <img alt="undefined" src="https://img.shields.io/bundlephobia/minzip/urs.svg">
     </a>
-    <a href="https://bundlephobia.com/result?p=use-ssr">
-      <img alt="undefined" src="https://img.shields.io/bundlephobia/minzip/use-ssr.svg">
-    </a>
-    <a href="https://greenkeeper.io/">
-      <img src="https://badges.greenkeeper.io/alex-cory/use-ssr.svg">
-    </a>
-    <a href="https://github.com/alex-cory/use-ssr/blob/master/license.md">
-      <img alt="undefined" src="https://img.shields.io/github/license/alex-cory/use-ssr.svg">
-    </a>
-    <a href="https://codeclimate.com/github/alex-cory/use-ssr/maintainability">
+    <!-- <a href="https://github.com/alex-cory/urs/blob/master/license.md">
+      <img alt="undefined" src="https://img.shields.io/github/license/alex-cory/urs.svg">
+    </a> -->
+    <a href="https://codeclimate.com/github/alex-cory/urs/maintainability">
       <img src="https://api.codeclimate.com/v1/badges/e661bf6aa5e4d64502c6/maintainability" />
     </a>
-    <a href="https://snyk.io/test/github/alex-cory/use-ssr?targetFile=package.json">
-      <img src="https://snyk.io/test/github/alex-cory/use-ssr/badge.svg?targetFile=package.json" alt="Known Vulnerabilities" data-canonical-src="https://snyk.io/test/github/alex-cory/use-ssr?targetFile=package.json" style="max-width:100%;">
+    <a href="https://www.npmjs.com/package/urs">
+      <img src="https://img.shields.io/npm/v/urs.svg" style="max-width:100%;">
     </a>
-    <a href="https://www.npmjs.com/package/use-ssr">
-      <img src="https://img.shields.io/npm/v/use-ssr.svg" alt="Known Vulnerabilities" data-canonical-src="https://snyk.io/test/github/alex-cory/use-ssr?targetFile=package.json" style="max-width:100%;">
-    </a>
-    <a href="https://circleci.com/gh/alex-cory/use-ssr">
-      <img src="https://img.shields.io/circleci/project/github/alex-cory/use-ssr/master.svg" />
-    </a>
-</p> -->
+</p>
 
-<!-- Features
+Features
 --------
-- SSR (server side rendering) support
+
 - TypeScript support
 - Zero dependencies
-- React Native support -->
+- React Native support
+- Keep your state consistant within your callback functions
 
 <!-- ### Examples
-- [Example - Next.js - codesandbox container](https://codesandbox.io/s/usessr-in-nextjs-actual-epb25) (sometimes containers are buggy, if so try [this example](https://codesandbox.io/s/usessr-in-nextjs-4gy7v)) -->
+- [Example - Next.js - codesandbox container](https://codesandbox.io/s/rs-in-nextjs-actual-epb25) (sometimes containers are buggy, if so try [this example](https://codesandbox.io/s/rs-in-nextjs-4gy7v)) -->
 
@@ -63,19 +51,11 @@ Installation
 
-
-  // if your state is an object, it will recursively go through and turn everything into getters
-  // for instance:
-  useEffect(() => {
+  const onClick = () => {
     setState({ no: 'way' })
-  }, [])
 
+    // to get the actual state you must do
+    console.log('state.current', state.current) // gives us { no: 'way' }
+    // whereas if it were a normal `setState` it would be `undefined`
 
-  const onClick = () => {
-    // to get the actual state you must do
-    console.log('value', state.value)
-    // if it's an object state, instead of having to do
-    console.log('no', state.value.no)
-    // you can just do
-    console.log('no', state.no)
-    // BUT, the caveat is you have to do `state.whatever`
-    // you CANNOT destructure like: `const [{ no }, setState] = useState()`
+    // BUT, the caveat is you have to do `state.current.whatever`
+    // you CANNOT destructure like: `const [{ current }, setState] = useState()`
   }
@@ -92,15 +72,7 @@
 
+The 2nd argument of `useRefState` determines if you want to be able to update state when a component
+is unmounted. If `true` it will block setState on unmounted components. Useful for the common error `cannot update state on unmounted component`.
+
 ```js
-const [
-  state,
-  setState
-] = useSSR({
-  _blockOnUnmount: true, // true by default
-  // `_depth` IS NOT IMPLEMENTED YET
-  // this will make it recurse into an object
-  // however many layers deep. 2 by default
-  _depth: 2, // 2 by default
-  // the rest of the fields in here are just
-  // whatever default state you wanna give
-})
+const [state, setState] = useRefState('same as useState default state', true)
 ```

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

Worsened metrics

Total package byte prevSize

7965

decreased by-14.38%

Lines of code

38

decreased by-7.32%

Number of lines in readme file

77

decreased by-26.67%

No dependency changes