New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@unleash/proxy-client-react

Package Overview
Dependencies
Maintainers
5
Versions
73
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@unleash/proxy-client-react - npm Package Compare versions

Comparing version 3.5.0 to 3.5.1

dist/src/integration.test.d.ts

2

dist/index.browser.js

@@ -1,1 +0,1 @@

(()=>{"use strict";var e={n:n=>{var t=n&&n.__esModule?()=>n.default:()=>n;return e.d(t,{a:t}),t},d:(n,t)=>{for(var r in t)e.o(t,r)&&!e.o(n,r)&&Object.defineProperty(n,r,{enumerable:!0,get:t[r]})},o:(e,n)=>Object.prototype.hasOwnProperty.call(e,n),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},n={};e.r(n),e.d(n,{FlagContext:()=>u,FlagProvider:()=>o,InMemoryStorageProvider:()=>t.InMemoryStorageProvider,LocalStorageProvider:()=>t.LocalStorageProvider,UnleashClient:()=>t.UnleashClient,default:()=>d,useFlag:()=>a,useFlags:()=>c,useFlagsStatus:()=>i,useUnleashClient:()=>f,useUnleashContext:()=>s,useVariant:()=>l});const t=require("unleash-proxy-client"),r=require("react"),u=e.n(r)().createContext(null);const o=function(e){var n=e.config,o=e.children,a=e.unleashClient,c=e.startClient,i=void 0===c||c,l=r.useRef(a),s=r.useState(!1),f=s[0],d=s[1],g=r.useState(null),v=g[0],y=g[1],p=r.useRef(null),h=r.useRef(null);n||a||console.warn("You must provide either a config or an unleash client to the flag provider. If you are initializing the client in useEffect, you can avoid this warning by\n checking if the client exists before rendering."),l.current||(l.current=new t.UnleashClient(n));var b=function(e){p.current=e,null===p.current&&y(e)},x=function(){d(!0)};h.current||(l.current.on("ready",x),l.current.on("error",b),h.current="set"),r.useEffect((function(){return(i||!a)&&(l.current.stop(),l.current.start()),function(){l.current&&(l.current.off("error",b),l.current.off("ready",x),l.current.stop())}}),[]);var C=function(e){return n=void 0,t=void 0,u=function(){return function(e,n){var t,r,u,o,a={label:0,sent:function(){if(1&u[0])throw u[1];return u[1]},trys:[],ops:[]};return o={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function c(o){return function(c){return function(o){if(t)throw new TypeError("Generator is already executing.");for(;a;)try{if(t=1,r&&(u=2&o[0]?r.return:o[0]?r.throw||((u=r.return)&&u.call(r),0):r.next)&&!(u=u.call(r,o[1])).done)return u;switch(r=0,u&&(o=[2&o[0],u.value]),o[0]){case 0:case 1:u=o;break;case 4:return a.label++,{value:o[1],done:!1};case 5:a.label++,r=o[1],o=[0];continue;case 7:o=a.ops.pop(),a.trys.pop();continue;default:if(!((u=(u=a.trys).length>0&&u[u.length-1])||6!==o[0]&&2!==o[0])){a=0;continue}if(3===o[0]&&(!u||o[1]>u[0]&&o[1]<u[3])){a.label=o[1];break}if(6===o[0]&&a.label<u[1]){a.label=u[1],u=o;break}if(u&&a.label<u[2]){a.label=u[2],a.ops.push(o);break}u[2]&&a.ops.pop(),a.trys.pop();continue}o=n.call(e,a)}catch(e){o=[6,e],r=0}finally{t=u=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,c])}}}(this,(function(n){switch(n.label){case 0:return[4,l.current.updateContext(e)];case 1:return n.sent(),[2]}}))},new((r=void 0)||(r=Promise))((function(e,o){function a(e){try{i(u.next(e))}catch(e){o(e)}}function c(e){try{i(u.throw(e))}catch(e){o(e)}}function i(n){var t;n.done?e(n.value):(t=n.value,t instanceof r?t:new r((function(e){e(t)}))).then(a,c)}i((u=u.apply(n,t||[])).next())}));var n,t,r,u},m=function(e){return l.current.isEnabled(e)},S=function(e){return l.current.getVariant(e)},w=function(e,n,t){return l.current.on(e,n,t)},E=r.useMemo((function(){return{on:w,updateContext:C,isEnabled:m,getVariant:S,client:l.current,flagsReady:f,flagsError:v,setFlagsReady:d,setFlagsError:y}}),[f,v]);return r.createElement(u.Provider,{value:E},o)},a=function(e){var n=(0,r.useContext)(u),t=n.isEnabled,o=n.client,a=(0,r.useState)(!!t(e)),c=a[0],i=a[1],l=(0,r.useRef)();return l.current=c,(0,r.useEffect)((function(){if(o){o.on("update",(function(){var n=t(e);n!==l.current&&(l.current=n,i(!!n))})),o.on("ready",(function(){var n=t(e);l.current=n,i(n)}))}}),[o]),c},c=function(){return(0,r.useContext)(u).client.getAllToggles()},i=function(){var e=(0,r.useContext)(u);return{flagsReady:e.flagsReady,flagsError:e.flagsError}},l=function(e){var n=(0,r.useContext)(u),t=n.getVariant,o=n.client,a=(0,r.useState)(t(e)),c=a[0],i=a[1],l=(0,r.useRef)();return l.current=c,(0,r.useEffect)((function(){if(o){o.on("update",(function(){var n=t(e);l.current.name===n.name&&l.current.enabled===n.enabled||(i(n),l.current=n)})),o.on("ready",(function(){var n=t(e);l.current.name=n.name,l.current.enabled=n.enabled,i(n)}))}}),[o]),c||{}},s=function(){return(0,r.useContext)(u).updateContext},f=function(){return(0,r.useContext)(u).client},d=o;module.exports=n})();
(()=>{"use strict";var e={n:n=>{var t=n&&n.__esModule?()=>n.default:()=>n;return e.d(t,{a:t}),t},d:(n,t)=>{for(var r in t)e.o(t,r)&&!e.o(n,r)&&Object.defineProperty(n,r,{enumerable:!0,get:t[r]})},o:(e,n)=>Object.prototype.hasOwnProperty.call(e,n),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},n={};e.r(n),e.d(n,{FlagContext:()=>o,FlagProvider:()=>a,InMemoryStorageProvider:()=>t.InMemoryStorageProvider,LocalStorageProvider:()=>t.LocalStorageProvider,UnleashClient:()=>t.UnleashClient,default:()=>v,useFlag:()=>i,useFlags:()=>l,useFlagsStatus:()=>c,useUnleashClient:()=>d,useUnleashContext:()=>f,useVariant:()=>s});const t=require("unleash-proxy-client"),r=require("react"),o=e.n(r)().createContext(null);var u={bootstrap:[],disableRefresh:!0,disableMetrics:!0,url:"http://localhost",appName:"offline",clientKey:"not-used"};const a=function(e){var n=e.config,a=e.children,i=e.unleashClient,l=e.startClient,c=void 0===l||l,s=r.useRef(i||new t.UnleashClient(n||u)),f=r.useState(!1),d=f[0],v=f[1],p=r.useState(null),g=p[0],y=p[1],b=r.useRef(null);r.useEffect((function(){n||i||console.error("You must provide either a config or an unleash client to the flag provider.\n If you are initializing the client in useEffect, you can avoid this warning\n by checking if the client exists before rendering.");var e=function(e){b.current=e,null===b.current&&y(e)},t=function(){v(!0)};return s.current.on("ready",t),s.current.on("error",e),(c||!i)&&(s.current.stop(),s.current.start()),function(){s.current&&(s.current.off("error",e),s.current.off("ready",t),s.current.stop())}}),[]);var h=function(e){return n=void 0,t=void 0,o=function(){return function(e,n){var t,r,o,u,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return u={next:i(0),throw:i(1),return:i(2)},"function"==typeof Symbol&&(u[Symbol.iterator]=function(){return this}),u;function i(u){return function(i){return function(u){if(t)throw new TypeError("Generator is already executing.");for(;a;)try{if(t=1,r&&(o=2&u[0]?r.return:u[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,u[1])).done)return o;switch(r=0,o&&(u=[2&u[0],o.value]),u[0]){case 0:case 1:o=u;break;case 4:return a.label++,{value:u[1],done:!1};case 5:a.label++,r=u[1],u=[0];continue;case 7:u=a.ops.pop(),a.trys.pop();continue;default:if(!((o=(o=a.trys).length>0&&o[o.length-1])||6!==u[0]&&2!==u[0])){a=0;continue}if(3===u[0]&&(!o||u[1]>o[0]&&u[1]<o[3])){a.label=u[1];break}if(6===u[0]&&a.label<o[1]){a.label=o[1],o=u;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(u);break}o[2]&&a.ops.pop(),a.trys.pop();continue}u=n.call(e,a)}catch(e){u=[6,e],r=0}finally{t=o=0}if(5&u[0])throw u[1];return{value:u[0]?u[1]:void 0,done:!0}}([u,i])}}}(this,(function(n){switch(n.label){case 0:return[4,s.current.updateContext(e)];case 1:return n.sent(),[2]}}))},new((r=void 0)||(r=Promise))((function(e,u){function a(e){try{l(o.next(e))}catch(e){u(e)}}function i(e){try{l(o.throw(e))}catch(e){u(e)}}function l(n){var t;n.done?e(n.value):(t=n.value,t instanceof r?t:new r((function(e){e(t)}))).then(a,i)}l((o=o.apply(n,t||[])).next())}));var n,t,r,o},m=function(e){return s.current.isEnabled(e)},x=function(e){return s.current.getVariant(e)},C=function(e,n,t){return s.current.on(e,n,t)},S=r.useMemo((function(){return{on:C,updateContext:h,isEnabled:m,getVariant:x,client:s.current,flagsReady:d,flagsError:g,setFlagsReady:v,setFlagsError:y}}),[d,g]);return r.createElement(o.Provider,{value:S},a)},i=function(e){var n=(0,r.useContext)(o),t=n.isEnabled,u=n.client,a=(0,r.useState)(!!t(e)),i=a[0],l=a[1],c=(0,r.useRef)();return c.current=i,(0,r.useEffect)((function(){if(u){u.on("update",(function(){var n=t(e);n!==c.current&&(c.current=n,l(!!n))})),u.on("ready",(function(){var n=t(e);c.current=n,l(n)}))}}),[u]),i},l=function(){return(0,r.useContext)(o).client.getAllToggles()},c=function(){var e=(0,r.useContext)(o);return{flagsReady:e.flagsReady,flagsError:e.flagsError}},s=function(e){var n=(0,r.useContext)(o),t=n.getVariant,u=n.client,a=(0,r.useState)(t(e)),i=a[0],l=a[1],c=(0,r.useRef)({name:i.name,enabled:i.enabled});return c.current=i,(0,r.useEffect)((function(){if(u){u.on("update",(function(){var n=t(e);c.current.name===(null==n?void 0:n.name)&&c.current.enabled===(null==n?void 0:n.enabled)||(l(n),c.current=n)})),u.on("ready",(function(){var n=t(e);c.current.name=null==n?void 0:n.name,c.current.enabled=null==n?void 0:n.enabled,l(n)}))}}),[u]),i||{}},f=function(){return(0,r.useContext)(o).updateContext},d=function(){return(0,r.useContext)(o).client},v=a;module.exports=n})();

2

dist/index.js

@@ -1,1 +0,1 @@

(()=>{"use strict";var e={n:n=>{var t=n&&n.__esModule?()=>n.default:()=>n;return e.d(t,{a:t}),t},d:(n,t)=>{for(var r in t)e.o(t,r)&&!e.o(n,r)&&Object.defineProperty(n,r,{enumerable:!0,get:t[r]})},o:(e,n)=>Object.prototype.hasOwnProperty.call(e,n),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},n={};e.r(n),e.d(n,{FlagContext:()=>u,FlagProvider:()=>o,InMemoryStorageProvider:()=>t.InMemoryStorageProvider,LocalStorageProvider:()=>t.LocalStorageProvider,UnleashClient:()=>t.UnleashClient,default:()=>d,useFlag:()=>a,useFlags:()=>c,useFlagsStatus:()=>i,useUnleashClient:()=>f,useUnleashContext:()=>s,useVariant:()=>l});const t=require("unleash-proxy-client"),r=require("react"),u=e.n(r)().createContext(null);const o=function(e){var n=e.config,o=e.children,a=e.unleashClient,c=e.startClient,i=void 0===c||c,l=r.useRef(a),s=r.useState(!1),f=s[0],d=s[1],g=r.useState(null),v=g[0],y=g[1],p=r.useRef(null),h=r.useRef(null);n||a||console.warn("You must provide either a config or an unleash client to the flag provider. If you are initializing the client in useEffect, you can avoid this warning by\n checking if the client exists before rendering."),l.current||(l.current=new t.UnleashClient(n));var b=function(e){p.current=e,null===p.current&&y(e)},x=function(){d(!0)};h.current||(l.current.on("ready",x),l.current.on("error",b),h.current="set"),r.useEffect((function(){return(i||!a)&&(l.current.stop(),l.current.start()),function(){l.current&&(l.current.off("error",b),l.current.off("ready",x),l.current.stop())}}),[]);var C=function(e){return n=void 0,t=void 0,u=function(){return function(e,n){var t,r,u,o,a={label:0,sent:function(){if(1&u[0])throw u[1];return u[1]},trys:[],ops:[]};return o={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function c(o){return function(c){return function(o){if(t)throw new TypeError("Generator is already executing.");for(;a;)try{if(t=1,r&&(u=2&o[0]?r.return:o[0]?r.throw||((u=r.return)&&u.call(r),0):r.next)&&!(u=u.call(r,o[1])).done)return u;switch(r=0,u&&(o=[2&o[0],u.value]),o[0]){case 0:case 1:u=o;break;case 4:return a.label++,{value:o[1],done:!1};case 5:a.label++,r=o[1],o=[0];continue;case 7:o=a.ops.pop(),a.trys.pop();continue;default:if(!((u=(u=a.trys).length>0&&u[u.length-1])||6!==o[0]&&2!==o[0])){a=0;continue}if(3===o[0]&&(!u||o[1]>u[0]&&o[1]<u[3])){a.label=o[1];break}if(6===o[0]&&a.label<u[1]){a.label=u[1],u=o;break}if(u&&a.label<u[2]){a.label=u[2],a.ops.push(o);break}u[2]&&a.ops.pop(),a.trys.pop();continue}o=n.call(e,a)}catch(e){o=[6,e],r=0}finally{t=u=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,c])}}}(this,(function(n){switch(n.label){case 0:return[4,l.current.updateContext(e)];case 1:return n.sent(),[2]}}))},new((r=void 0)||(r=Promise))((function(e,o){function a(e){try{i(u.next(e))}catch(e){o(e)}}function c(e){try{i(u.throw(e))}catch(e){o(e)}}function i(n){var t;n.done?e(n.value):(t=n.value,t instanceof r?t:new r((function(e){e(t)}))).then(a,c)}i((u=u.apply(n,t||[])).next())}));var n,t,r,u},m=function(e){return l.current.isEnabled(e)},S=function(e){return l.current.getVariant(e)},w=function(e,n,t){return l.current.on(e,n,t)},E=r.useMemo((function(){return{on:w,updateContext:C,isEnabled:m,getVariant:S,client:l.current,flagsReady:f,flagsError:v,setFlagsReady:d,setFlagsError:y}}),[f,v]);return r.createElement(u.Provider,{value:E},o)},a=function(e){var n=(0,r.useContext)(u),t=n.isEnabled,o=n.client,a=(0,r.useState)(!!t(e)),c=a[0],i=a[1],l=(0,r.useRef)();return l.current=c,(0,r.useEffect)((function(){if(o){o.on("update",(function(){var n=t(e);n!==l.current&&(l.current=n,i(!!n))})),o.on("ready",(function(){var n=t(e);l.current=n,i(n)}))}}),[o]),c},c=function(){return(0,r.useContext)(u).client.getAllToggles()},i=function(){var e=(0,r.useContext)(u);return{flagsReady:e.flagsReady,flagsError:e.flagsError}},l=function(e){var n=(0,r.useContext)(u),t=n.getVariant,o=n.client,a=(0,r.useState)(t(e)),c=a[0],i=a[1],l=(0,r.useRef)();return l.current=c,(0,r.useEffect)((function(){if(o){o.on("update",(function(){var n=t(e);l.current.name===n.name&&l.current.enabled===n.enabled||(i(n),l.current=n)})),o.on("ready",(function(){var n=t(e);l.current.name=n.name,l.current.enabled=n.enabled,i(n)}))}}),[o]),c||{}},s=function(){return(0,r.useContext)(u).updateContext},f=function(){return(0,r.useContext)(u).client},d=o;module.exports=n})();
(()=>{"use strict";var e={n:n=>{var t=n&&n.__esModule?()=>n.default:()=>n;return e.d(t,{a:t}),t},d:(n,t)=>{for(var r in t)e.o(t,r)&&!e.o(n,r)&&Object.defineProperty(n,r,{enumerable:!0,get:t[r]})},o:(e,n)=>Object.prototype.hasOwnProperty.call(e,n),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},n={};e.r(n),e.d(n,{FlagContext:()=>o,FlagProvider:()=>a,InMemoryStorageProvider:()=>t.InMemoryStorageProvider,LocalStorageProvider:()=>t.LocalStorageProvider,UnleashClient:()=>t.UnleashClient,default:()=>v,useFlag:()=>i,useFlags:()=>l,useFlagsStatus:()=>c,useUnleashClient:()=>d,useUnleashContext:()=>f,useVariant:()=>s});const t=require("unleash-proxy-client"),r=require("react"),o=e.n(r)().createContext(null);var u={bootstrap:[],disableRefresh:!0,disableMetrics:!0,url:"http://localhost",appName:"offline",clientKey:"not-used"};const a=function(e){var n=e.config,a=e.children,i=e.unleashClient,l=e.startClient,c=void 0===l||l,s=r.useRef(i||new t.UnleashClient(n||u)),f=r.useState(!1),d=f[0],v=f[1],p=r.useState(null),g=p[0],y=p[1],b=r.useRef(null);r.useEffect((function(){n||i||console.error("You must provide either a config or an unleash client to the flag provider.\n If you are initializing the client in useEffect, you can avoid this warning\n by checking if the client exists before rendering.");var e=function(e){b.current=e,null===b.current&&y(e)},t=function(){v(!0)};return s.current.on("ready",t),s.current.on("error",e),(c||!i)&&(s.current.stop(),s.current.start()),function(){s.current&&(s.current.off("error",e),s.current.off("ready",t),s.current.stop())}}),[]);var h=function(e){return n=void 0,t=void 0,o=function(){return function(e,n){var t,r,o,u,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return u={next:i(0),throw:i(1),return:i(2)},"function"==typeof Symbol&&(u[Symbol.iterator]=function(){return this}),u;function i(u){return function(i){return function(u){if(t)throw new TypeError("Generator is already executing.");for(;a;)try{if(t=1,r&&(o=2&u[0]?r.return:u[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,u[1])).done)return o;switch(r=0,o&&(u=[2&u[0],o.value]),u[0]){case 0:case 1:o=u;break;case 4:return a.label++,{value:u[1],done:!1};case 5:a.label++,r=u[1],u=[0];continue;case 7:u=a.ops.pop(),a.trys.pop();continue;default:if(!((o=(o=a.trys).length>0&&o[o.length-1])||6!==u[0]&&2!==u[0])){a=0;continue}if(3===u[0]&&(!o||u[1]>o[0]&&u[1]<o[3])){a.label=u[1];break}if(6===u[0]&&a.label<o[1]){a.label=o[1],o=u;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(u);break}o[2]&&a.ops.pop(),a.trys.pop();continue}u=n.call(e,a)}catch(e){u=[6,e],r=0}finally{t=o=0}if(5&u[0])throw u[1];return{value:u[0]?u[1]:void 0,done:!0}}([u,i])}}}(this,(function(n){switch(n.label){case 0:return[4,s.current.updateContext(e)];case 1:return n.sent(),[2]}}))},new((r=void 0)||(r=Promise))((function(e,u){function a(e){try{l(o.next(e))}catch(e){u(e)}}function i(e){try{l(o.throw(e))}catch(e){u(e)}}function l(n){var t;n.done?e(n.value):(t=n.value,t instanceof r?t:new r((function(e){e(t)}))).then(a,i)}l((o=o.apply(n,t||[])).next())}));var n,t,r,o},m=function(e){return s.current.isEnabled(e)},x=function(e){return s.current.getVariant(e)},C=function(e,n,t){return s.current.on(e,n,t)},S=r.useMemo((function(){return{on:C,updateContext:h,isEnabled:m,getVariant:x,client:s.current,flagsReady:d,flagsError:g,setFlagsReady:v,setFlagsError:y}}),[d,g]);return r.createElement(o.Provider,{value:S},a)},i=function(e){var n=(0,r.useContext)(o),t=n.isEnabled,u=n.client,a=(0,r.useState)(!!t(e)),i=a[0],l=a[1],c=(0,r.useRef)();return c.current=i,(0,r.useEffect)((function(){if(u){u.on("update",(function(){var n=t(e);n!==c.current&&(c.current=n,l(!!n))})),u.on("ready",(function(){var n=t(e);c.current=n,l(n)}))}}),[u]),i},l=function(){return(0,r.useContext)(o).client.getAllToggles()},c=function(){var e=(0,r.useContext)(o);return{flagsReady:e.flagsReady,flagsError:e.flagsError}},s=function(e){var n=(0,r.useContext)(o),t=n.getVariant,u=n.client,a=(0,r.useState)(t(e)),i=a[0],l=a[1],c=(0,r.useRef)({name:i.name,enabled:i.enabled});return c.current=i,(0,r.useEffect)((function(){if(u){u.on("update",(function(){var n=t(e);c.current.name===(null==n?void 0:n.name)&&c.current.enabled===(null==n?void 0:n.enabled)||(l(n),c.current=n)})),u.on("ready",(function(){var n=t(e);c.current.name=null==n?void 0:n.name,c.current.enabled=null==n?void 0:n.enabled,l(n)}))}}),[u]),i||{}},f=function(){return(0,r.useContext)(o).updateContext},d=function(){return(0,r.useContext)(o).client},v=a;module.exports=n})();

6

package.json
{
"name": "@unleash/proxy-client-react",
"version": "3.5.0",
"version": "3.5.1",
"description": "React interface for working with unleash",

@@ -43,3 +43,3 @@ "main": "./dist/index.js",

"typescript": "^4.4.3",
"unleash-proxy-client": "^2.4.0",
"unleash-proxy-client": "^2.4.2",
"webpack": "^5.35.1",

@@ -49,4 +49,4 @@ "webpack-cli": "^4.6.0"

"peerDependencies": {
"unleash-proxy-client": "^2.4.0"
"unleash-proxy-client": "^2.4.2"
}
}

245

README.md

@@ -1,5 +0,1 @@

# DISCLAIMER:
This library is meant to be used with the [unleash-proxy](https://github.com/Unleash/unleash-proxy). The proxy application layer will sit between your unleash instance and your client applications, and provides performance and security benefits. DO NOT TRY to connect this library directly to the unleash instance, as the datasets follow different formats because the proxy only returns evaluated toggle information.
# Installation

@@ -9,17 +5,13 @@

npm install @unleash/proxy-client-react unleash-proxy-client
// or
# or
yarn add @unleash/proxy-client-react unleash-proxy-client
```
# Upgrade path from v1 -> v2
If you were previously using the built in Async storage used in the unleash-proxy-client-js, this no longer comes bundled with the library. You will need to install the storage adapter for your preferred storage solution. Otherwise there are no breaking changes.
# Upgrade path from v2 -> v3
Previously the unleash client was bundled as dependency directly in this library. It's now changed to a peer dependency and listed as an external.
# How to use
In v2 there was only one distribution based on the fact that webpack polyfilled the necessary features in v4. This is no longer the case in webpack v5. We now provide two distribution builds, one for the server and one for the client - and use the browser field in the npm package to hint module builders about which version to use. The default `dist/index.js` file points to the node version, while the web build is located at `dist/index.browser.js`
## Initialize the client
Upgrading should be as easy as running yarn again with the new version, but we made the made bump regardless to be safe. Note: If you are not able to resolve the peer dependency on `unleash-proxy-client` you might need to run `npm install unleash-proxy-client`
Prepare [Unleash Proxy](https://docs.getunleash.io/reference/unleash-proxy) secret
or [Frontend API Access](https://docs.getunleash.io/reference/front-end-api) token.
# Initialization
Import the provider like this in your entrypoint file (typically index.js/ts):

@@ -32,7 +24,6 @@

const config = {
url: 'https://HOSTNAME/proxy',
clientKey: 'PROXYKEY',
refreshInterval: 15,
appName: 'your-app-name',
environment: 'dev',
url: '<unleash-url>/api/frontend', // Your front-end API URL or the Unleash proxy's URL (https://<proxy-url>/proxy)
clientKey: '<your-token>', // A client-side API token OR one of your proxy's designated client keys (previously known as proxy secrets)
refreshInterval: 15, // How often (in seconds) the client should poll the proxy for updates
appName: 'your-app-name', // The name of your application. It's only used for identifying your application
};

@@ -51,69 +42,9 @@

Alternatively, you can pass your own client in to the FlagProvider:
```jsx
import { createRoot } from 'react-dom/client';
import { FlagProvider, UnleashClient } from '@unleash/proxy-client-react';
### Connection options
const config = {
url: 'https://HOSTNAME/proxy',
clientKey: 'PROXYKEY',
refreshInterval: 15,
appName: 'your-app-name',
environment: 'dev',
};
To connect this SDK to your Unleash instance's [front-end API](https://docs.getunleash.io/reference/front-end-api), use the URL to your Unleash instance's front-end API (`<unleash-url>/api/frontend`) as the `url` parameter. For the `clientKey` parameter, use a `FRONTEND` token generated from your Unleash instance. Refer to the [_how to create API tokens_](https://docs.getunleash.io/how-to/how-to-create-api-tokens) guide for the necessary steps.
const client = new UnleashClient(config);
const root = createRoot(document.getElementById('root'));
To connect this SDK to the [Unleash proxy](https://docs.getunleash.io/reference/unleash-proxy), use the proxy's URL and a [proxy client key](https://docs.getunleash.io/reference/api-tokens-and-client-keys#proxy-client-keys). The [_configuration_ section of the Unleash proxy docs](https://docs.getunleash.io/reference/unleash-proxy#configuration) contains more info on how to configure client keys for your proxy.
root.render(
<React.StrictMode>
<FlagProvider unleashClient={client}>
<App />
</FlagProvider>
</React.StrictMode>
);
```
## Deferring client start
By default, the Unleash client will start polling the Proxy for toggles immediately when the `FlagProvider` component renders. You can delay the polling by:
- setting the `startClient` prop to `false`
- passing a client instance to the `FlagProvider`
```jsx
root.render(
<React.StrictMode>
<FlagProvider unleashClient={client} startClient={false}>
<App />
</FlagProvider>
</React.StrictMode>
);
```
Deferring the client start gives you more fine-grained control over when to start fetching the feature toggle configuration. This could be handy in cases where you need to get some other context data from the server before fetching toggles, for instance.
To start the client, use the client's `start` method. The below snippet of pseudocode will defer polling until the end of the `asyncProcess` function.
``` jsx
const client = new UnleashClient({ /* ... */ })
useEffect(() => {
const asyncProcess = async () => {
// do async work ...
client.start()
}
asyncProcess()
}, [])
return (
// Pass client as `unleashClient` and set `startClient` to `false`
<FlagProvider unleashClient={client} startClient={false}>
<App />
</FlagProvider>
)
```
# Usage
## Check feature toggle status

@@ -130,5 +61,5 @@

if (enabled) {
return <SomeComponent />
return <SomeComponent />;
}
return <AnotherComponent />
return <AnotherComponent />;
};

@@ -149,8 +80,8 @@

if (variant.enabled && variant.name === "SomeComponent") {
return <SomeComponent />
} else if (variant.enabled && variant.name === "AnotherComponent") {
return <AnotherComponent />
if (variant.enabled && variant.name === 'SomeComponent') {
return <SomeComponent />;
} else if (variant.enabled && variant.name === 'AnotherComponent') {
return <AnotherComponent />;
}
return <DefaultComponent />
return <DefaultComponent />;
};

@@ -167,3 +98,3 @@

```jsx
import { useFlagsStatus } from '@unleash/proxy-client-react'
import { useFlagsStatus } from '@unleash/proxy-client-react';

@@ -174,7 +105,6 @@ const MyApp = () => {

if (!flagsReady) {
return <Loading />
return <Loading />;
}
return <MyComponent error={flagsError}/>
}
return <MyComponent error={flagsError} />;
};
```

@@ -187,6 +117,6 @@

```jsx
import { useUnleashContext, useFlag } from '@unleash/proxy-client-react'
import { useUnleashContext, useFlag } from '@unleash/proxy-client-react';
const MyComponent = ({ userId }) => {
const variant = useFlag("my-toggle");
const variant = useFlag('my-toggle');
const updateContext = useUnleashContext();

@@ -196,8 +126,9 @@

// context is updated with userId
updateContext({ userId })
}, [userId])
updateContext({ userId });
}, [userId]);
// OR if you need to perform an action right after new context is applied
useEffect(() => {
async function run() {
// Can wait for the new flags to pull in from the different context
// Can wait for the new flags to pull in from the different context
await updateContext({ userId });

@@ -208,4 +139,36 @@ console.log('new flags loaded for', userId);

}, [userId]);
}
};
```
# Advanced use cases
## Deferring client start
By default, the Unleash client will start polling the Proxy for toggles immediately when the `FlagProvider` component renders. You can prevent it by setting `startClient` prop to `false`. This is useful when you'd like to for example bootstrap the client and work offline.
Deferring the client start gives you more fine-grained control over when to start fetching the feature toggle configuration. This could be handy in cases where you need to get some other context data from the server before fetching toggles, for instance.
To start the client, use the client's `start` method. The below snippet of pseudocode will defer polling until the end of the `asyncProcess` function.
```jsx
const client = new UnleashClient({
/* ... */
});
const MyAppComponent = () => {
useEffect(() => {
const asyncProcess = async () => {
// do async work ...
client.start();
};
asyncProcess();
}, []);
return (
// Pass client as `unleashClient` and set `startClient` to `false`
<FlagProvider unleashClient={client} startClient={false}>
<App />
</FlagProvider>
);
};
```

@@ -221,4 +184,2 @@

const updateContext = useUnleashContext();
const login = () => {

@@ -237,26 +198,8 @@ // login user

## React Native
## Usage with class components
IMPORTANT: This no longer comes included in the unleash-proxy-client-js library. You will need to install the storage adapter for your preferred storage solution.
Because React Native doesn't run in a web browser, it doesn't have access to the `localStorage` API. Instead, you need to tell Unleash to use your specific storage provider. The most common storage provider for React Native is [AsyncStorage](https://github.com/react-native-async-storage/async-storage).
To configure it, add the following property to your configuration object:
```js
const config = {
storageProvider: {
save: (name, data) => AsyncStorage.setItem(name, JSON.stringify(data)),
get: async (name) => {
const data = await AsyncStorage.getItem(name);
return data ? JSON.parse(data) : undefined;
}
},
};
```
## Usage with class components
Since this library uses hooks you have to implement a wrapper to use with class components. Beneath you can find an example of how to use this library with class components, using a custom wrapper:
```jsx
import React from "react";
import React from 'react';
import {

@@ -267,4 +210,4 @@ useFlag,

useVariant,
useFlagsStatus
} from "@unleash/proxy-client-react";
useFlagsStatus,
} from '@unleash/proxy-client-react';

@@ -278,3 +221,3 @@ interface IUnleashClassFlagProvider {

render,
flagName
flagName,
}: IUnleashClassFlagProvider) => {

@@ -315,3 +258,3 @@ const enabled = useFlag(flagName);

getUnleashContextSetter,
getFlagsStatus
getFlagsStatus,
})}

@@ -323,10 +266,48 @@ </>

Wrap your components like so:
Wrap your components like so:
```jsx
<UnleashClassFlagProvider
flagName="demoApp.step1"
render={({ isEnabled, getClient }) => (
<MyClassComponent isEnabled={isEnabled} getClient={getClient} />
)}
/>
<UnleashClassFlagProvider
flagName="demoApp.step1"
render={({ isEnabled, getClient }) => (
<MyClassComponent isEnabled={isEnabled} getClient={getClient} />
)}
/>
```
## React Native
IMPORTANT: This no longer comes included in the unleash-proxy-client-js library. You will need to install the storage adapter for your preferred storage solution.
Because React Native doesn't run in a web browser, it doesn't have access to the `localStorage` API. Instead, you need to tell Unleash to use your specific storage provider. The most common storage provider for React Native is [AsyncStorage](https://github.com/react-native-async-storage/async-storage).
To configure it, add the following property to your configuration object:
```js
const config = {
storageProvider: {
save: (name, data) => AsyncStorage.setItem(name, JSON.stringify(data)),
get: async (name) => {
const data = await AsyncStorage.getItem(name);
return data ? JSON.parse(data) : undefined;
},
},
};
```
# Migration guide
## Upgrade path from v1 -> v2
If you were previously using the built in Async storage used in the unleash-proxy-client-js, this no longer comes bundled with the library. You will need to install the storage adapter for your preferred storage solution. Otherwise there are no breaking changes.
## Upgrade path from v2 -> v3
Previously the unleash client was bundled as dependency directly in this library. It's now changed to a peer dependency and listed as an external.
In v2 there was only one distribution based on the fact that webpack polyfilled the necessary features in v4. This is no longer the case in webpack v5. We now provide two distribution builds, one for the server and one for the client - and use the browser field in the npm package to hint module builders about which version to use. The default `dist/index.js` file points to the node version, while the web build is located at `dist/index.browser.js`
Upgrading should be as easy as running yarn again with the new version, but we made the made bump regardless to be safe. Note: If you are not able to resolve the peer dependency on `unleash-proxy-client` you might need to run `npm install unleash-proxy-client`
## Upgrade path from v3 -> v4
`startClient` option has been simpilfied. Now it will also work if you don't pass custom client with it, and in SSR (when `typeof window === 'undefined'`) it defaults to `false`.
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc