use-persisted-state
Version:
A custom React Hook that provides a multi-instance, multi-tab/browser shared and persistent state.
2 lines (1 loc) • 1.58 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("@use-it/event-listener")):"function"==typeof define&&define.amd?define(["react","@use-it/event-listener"],t):(e=e||self).usePersistedState=t(e.react,e.useEventListener)}(this,function(e,t){t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var n={},r=function(e,t,r){return n[e]||(n[e]={callbacks:[],value:r}),n[e].callbacks.push(t),{deregister:function(){var r=n[e].callbacks,o=r.indexOf(t);o>-1&&r.splice(o,1)},emit:function(r){n[e].value!==r&&(n[e].value=r,n[e].callbacks.forEach(function(e){t!==e&&e(r)}))}}};return function(n,o){if(void 0===o&&(o="undefined"!=typeof global&&global.localStorage?global.localStorage:"undefined"!=typeof globalThis&&globalThis.localStorage?globalThis.localStorage:"undefined"!=typeof window&&window.localStorage?window.localStorage:"undefined"!=typeof localStorage?localStorage:null),o){var u=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))}}}(o);return function(o){return function(n,o,u){var a=u.get,l=u.set,i=e.useRef(null),c=e.useState(function(){return a(o,n)}),f=c[0],s=c[1];t("storage",function(e){if(e.key===o){var t=JSON.parse(e.newValue);f!==t&&s(t)}}),e.useEffect(function(){return i.current=r(o,s,n),function(){i.current.deregister()}},[n,o]);var d=e.useCallback(function(e){var t="function"==typeof e?e(f):e;l(o,t),s(t),i.current.emit(e)},[f,l,o]);return[f,d]}(o,n,u)}}return e.useState}});