use-persisted-state - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

dist/use-persisted-state.js

@@ -1,1 +0,1 @@
-var e=require("react"),n={},t=function(e,t,r){return n[e]||(n[e]={callbacks:[],value:r}),n[e].callbacks.push(t),{deregister:function(){var r=n[e].callbacks,u=r.indexOf(t);u>-1&&r.splice(u,1)},emit:function(r){n[e].value!==r&&(n[e].value=r,n[e].callbacks.forEach(function(e){t!==e&&e(r)}))}}};module.exports=function(n,r){return void 0===r&&(r=global.localStorage),function(u){var c,f,a,i=e.useRef(null),o=e.useCallback(function(){return function(e){return{get:function(n,t){var r=e.getItem(n);return null===r?"function"==typeof t?t():t:JSON.parse(r)},set:function(n,t){e.setItem(n,JSON.stringify(t))}}}(r)},[r])(),l=o.get,s=o.set,v=e.useState(function(){return l(n,u)}),g=v[0],b=v[1];return c="storage",f=function(e){var t=e.key,r=JSON.parse(e.newValue);t===n&&g!==r&&b(r)},a=e.useRef(),e.useEffect(function(){a.current=f}),e.useEffect(function(){var e=function(e){return a.current(e)};return global.addEventListener(c,e),function(){global.removeEventListener(c,e)}},[c]),e.useEffect(function(){return i.current=t(n,b,g),function(){i.current.deregister()}},[]),e.useEffect(function(){s(n,g),i.current.emit(g)},[g]),[g,b]}};
+var e=require("react"),n={},t=function(e,t,r){return n[e]||(n[e]={callbacks:[],value:r}),n[e].callbacks.push(t),{deregister:function(){var r=n[e].callbacks,u=r.indexOf(t);u>-1&&r.splice(u,1)},emit:function(r){n[e].value!==r&&(n[e].value=r,n[e].callbacks.forEach(function(e){t!==e&&e(r)}))}}},r=function(n,r,u){var c,f,a,i=e.useRef(null),o=e.useCallback(function(){return function(e){return{get:function(n,t){var r=e.getItem(n);return null===r?"function"==typeof t?t():t:JSON.parse(r)},set:function(n,t){e.setItem(n,JSON.stringify(t))}}}(u)},[u])(),l=o.get,s=o.set,v=e.useState(function(){return l(r,n)}),g=v[0],b=v[1];return c="storage",f=function(e){var n=e.key,t=JSON.parse(e.newValue);n===r&&g!==t&&b(t)},a=e.useRef(),e.useEffect(function(){a.current=f}),e.useEffect(function(){var e=function(e){return a.current(e)};return global.addEventListener(c,e),function(){global.removeEventListener(c,e)}},[c]),e.useEffect(function(){return i.current=t(r,b,n),function(){i.current.deregister()}},[]),e.useEffect(function(){s(r,g),i.current.emit(g)},[g]),[g,b]};module.exports=function(n,t){return void 0===t&&(t=global.localStorage),t?function(e){return r(e,n,t)}:e.useState};

dist/use-persisted-state.m.js

@@ -1,1 +0,1 @@
-import{useState as n,useEffect as t,useCallback as e,useRef as r}from"react";var u={},c=function(n,t,e){return u[n]||(u[n]={callbacks:[],value:e}),u[n].callbacks.push(t),{deregister:function(){var e=u[n].callbacks,r=e.indexOf(t);r>-1&&e.splice(r,1)},emit:function(e){u[n].value!==e&&(u[n].value=e,u[n].callbacks.forEach(function(n){t!==n&&n(e)}))}}};export default function(u,o){return void 0===o&&(o=global.localStorage),function(i){var a,f,l,s=r(null),v=e(function(){return function(n){return{get:function(t,e){var r=n.getItem(t);return null===r?"function"==typeof e?e():e:JSON.parse(r)},set:function(t,e){n.setItem(t,JSON.stringify(e))}}}(o)},[o])(),g=v.get,b=v.set,d=n(function(){return g(u,i)}),m=d[0],p=d[1];return a="storage",f=function(n){var t=n.key,e=JSON.parse(n.newValue);t===u&&m!==e&&p(e)},l=r(),t(function(){l.current=f}),t(function(){var n=function(n){return l.current(n)};return global.addEventListener(a,n),function(){global.removeEventListener(a,n)}},[a]),t(function(){return s.current=c(u,p,m),function(){s.current.deregister()}},[]),t(function(){b(u,m),s.current.emit(m)},[m]),[m,p]}}
+import{useRef as n,useEffect as t,useState as e,useCallback as r}from"react";var u={},c=function(n,t,e){return u[n]||(u[n]={callbacks:[],value:e}),u[n].callbacks.push(t),{deregister:function(){var e=u[n].callbacks,r=e.indexOf(t);r>-1&&e.splice(r,1)},emit:function(e){u[n].value!==e&&(u[n].value=e,u[n].callbacks.forEach(function(n){t!==n&&n(e)}))}}},o=function(u,o,i){var a,f,l,s=n(null),v=r(function(){return function(n){return{get:function(t,e){var r=n.getItem(t);return null===r?"function"==typeof e?e():e:JSON.parse(r)},set:function(t,e){n.setItem(t,JSON.stringify(e))}}}(i)},[i])(),g=v.get,b=v.set,d=e(function(){return g(o,u)}),m=d[0],p=d[1];return a="storage",f=function(n){var t=n.key,e=JSON.parse(n.newValue);t===o&&m!==e&&p(e)},l=n(),t(function(){l.current=f}),t(function(){var n=function(n){return l.current(n)};return global.addEventListener(a,n),function(){global.removeEventListener(a,n)}},[a]),t(function(){return s.current=c(o,p,u),function(){s.current.deregister()}},[]),t(function(){b(o,m),s.current.emit(m)},[m]),[m,p]};export default function(n,t){return void 0===t&&(t=global.localStorage),t?function(e){return o(e,n,t)}:e}

dist/use-persisted-state.umd.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):e.usePersistedState=t(e.react)}(this,function(e){var t={},n=function(e,n,r){return t[e]||(t[e]={callbacks:[],value:r}),t[e].callbacks.push(n),{deregister:function(){var r=t[e].callbacks,u=r.indexOf(n);u>-1&&r.splice(u,1)},emit:function(r){t[e].value!==r&&(t[e].value=r,t[e].callbacks.forEach(function(e){n!==e&&e(r)}))}}};return function(t,r){return void 0===r&&(r=global.localStorage),function(u){var c,f,i,o=e.useRef(null),a=e.useCallback(function(){return function(e){return{get:function(t,n){var r=e.getItem(t);return null===r?"function"==typeof n?n():n:JSON.parse(r)},set:function(t,n){e.setItem(t,JSON.stringify(n))}}}(r)},[r])(),s=a.get,l=a.set,d=e.useState(function(){return s(t,u)}),v=d[0],g=d[1];return c="storage",f=function(e){var n=e.key,r=JSON.parse(e.newValue);n===t&&v!==r&&g(r)},i=e.useRef(),e.useEffect(function(){i.current=f}),e.useEffect(function(){var e=function(e){return i.current(e)};return global.addEventListener(c,e),function(){global.removeEventListener(c,e)}},[c]),e.useEffect(function(){return o.current=n(t,g,v),function(){o.current.deregister()}},[]),e.useEffect(function(){l(t,v),o.current.emit(v)},[v]),[v,g]}}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):e.usePersistedState=t(e.react)}(this,function(e){var t={},n=function(e,n,u){return t[e]||(t[e]={callbacks:[],value:u}),t[e].callbacks.push(n),{deregister:function(){var u=t[e].callbacks,r=u.indexOf(n);r>-1&&u.splice(r,1)},emit:function(u){t[e].value!==u&&(t[e].value=u,t[e].callbacks.forEach(function(e){n!==e&&e(u)}))}}},u=function(t,u,r){var c,f,i,o=e.useRef(null),a=e.useCallback(function(){return function(e){return{get:function(t,n){var u=e.getItem(t);return null===u?"function"==typeof n?n():n:JSON.parse(u)},set:function(t,n){e.setItem(t,JSON.stringify(n))}}}(r)},[r])(),s=a.get,l=a.set,d=e.useState(function(){return s(u,t)}),v=d[0],g=d[1];return c="storage",f=function(e){var t=e.key,n=JSON.parse(e.newValue);t===u&&v!==n&&g(n)},i=e.useRef(),e.useEffect(function(){i.current=f}),e.useEffect(function(){var e=function(e){return i.current(e)};return global.addEventListener(c,e),function(){global.removeEventListener(c,e)}},[c]),e.useEffect(function(){return o.current=n(u,g,t),function(){o.current.deregister()}},[]),e.useEffect(function(){l(u,v),o.current.emit(v)},[v]),[v,g]};return function(t,n){return void 0===n&&(n=global.localStorage),n?function(e){return u(e,t,n)}:e.useState}});

package.json

 {
   "name": "use-persisted-state",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "A custom React Hook thst provides a multi-instance, multi-tab/browser shared and persistent state.",
@@ -5,0 +5,0 @@ "main": "dist/use-persisted-state.js",

README.md

@@ -9,4 +9,82 @@ # use-persisted-state
 
+`use-persisted-state` is not a hook itself, but is a factory that accepts a storage `key`
+and an optional storage provider (default = `localStorage`) and returns a hook
+that you can use as a direct replacement for `useState`.
+
+## Features
+
+💾 Persists the state to `localStorage`
+
+🖥 Syncs between tabs and/or browser windows
+
+📑 Shares state w/multiple hooks on a page
+
+
+## Requirement
+
+To use `use-persisted-state`, you must use `react@16.8.0` or greater which includes Hooks.
+
+## Installation
+
+```sh
+$ npm i use-persisted-state
+```
+
+
+## Example
+
+Let's take a look at how you can use `use-persisted-state`.
+Here we have an example of a typical up/down counter.
+
+```js
+import { useState } from 'react';
+
+const useCounter = initialCount => {
+  const [count, setCount] = useState(initialCount);
+
+  return {
+    count,
+    increment: () => setCount(currentCount => currentCount + 1),
+    decrement: () => setCount(currentCount => currentCount - 1),
+  };
+};
+
+export default useCounter;
+```
+
+Let's replace the import of `react` with an import from `use-persisted-state`.
+And we'll call `createPersistedState` (the factory function).
+This will return a `useCounterState` hook that we can use in place of `useState`.
+
+The complete code is a follows.
+
+```js
+import createPersistedState from 'use-persisted-state';
+const useCounterState = createPersistedState('count');
+
+const useCounter = initialCount => {
+  const [count, setCount] = useCounterState(initialCount);
+
+  return {
+    count,
+    increment: () => setCount(currentCount => currentCount + 1),
+    decrement: () => setCount(currentCount => currentCount - 1),
+  };
+};
+
+export default useCounter;
+```
+
+The state is shared with any other hook using the same key, either:
+on the same page, across tabs, or even browser windows.
+
+For example, open two copies of your app in two tabs.
+Any changes to state in one tab will be rendered on tne other tab.
+
+You can also close the browser and the next time you run your app,
+the state will be rendered as it was before you closed your browser.
+
+
 ## License
 
 **[MIT](LICENSE)** Licensed

No alert changes

Improved metrics

Total package byte prevSize

8931

increased by32.27%

Number of lines in readme file

90

increased by650%

No dependency changes