[{"data":1,"prerenderedAt":2864},["ShallowReactive",2],{"navigation_docs":3,"-sdks-browser-react":99,"-sdks-browser-react-surround":2024,"sdks\u002Freact\u002Finstall":2029,"sdks\u002Freact\u002Fconfigure":2112,"sdks\u002Freact\u002Fsimple-usage":2258,"sdks\u002Freact\u002Fuser-context":2397},[4,30],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Quickstart","\u002Fgetting-started\u002Fquickstart","1.getting-started\u002F1.quickstart","i-lucide-fast-forward",{"title":16,"path":17,"stem":18,"icon":19},"Core Concepts","\u002Fgetting-started\u002Fcore-concepts","1.getting-started\u002F2.core-concepts","i-lucide-workflow",{"title":21,"path":22,"stem":23,"icon":24},"Configs Anatomy","\u002Fgetting-started\u002Fconfigs","1.getting-started\u002F3.configs","i-lucide-file-cog",{"title":26,"path":27,"stem":28,"icon":29},"Architecture","\u002Fgetting-started\u002Farchitecture","1.getting-started\u002F4.architecture","i-lucide-layers",{"title":31,"defaultOpen":32,"path":33,"stem":34,"children":35,"page":6},"SDKs",true,"\u002Fsdks","2.sdks",[36,41,62,72,88],{"title":37,"path":38,"stem":39,"icon":40},"Available SDKs","\u002Fsdks\u002Favailable-sdks","2.sdks\u002F1.available-sdks","i-lucide-list",{"title":42,"icon":43,"defaultOpen":32,"path":44,"stem":45,"children":46,"page":6},"Browser SDKs","i-lucide-monitor","\u002Fsdks\u002Fbrowser","2.sdks\u002F2.browser",[47,52,57],{"title":48,"path":49,"stem":50,"icon":51},"Javascript","\u002Fsdks\u002Fbrowser\u002Fjavascript","2.sdks\u002F2.browser\u002F1.javascript","cd-logos-javascript",{"title":53,"path":54,"stem":55,"icon":56},"React","\u002Fsdks\u002Fbrowser\u002Freact","2.sdks\u002F2.browser\u002F2.react","cd-logos-react-light",{"title":58,"path":59,"stem":60,"icon":61},"Vue","\u002Fsdks\u002Fbrowser\u002Fvue","2.sdks\u002F2.browser\u002F3.vue","cd-logos-vue",{"title":63,"icon":64,"defaultOpen":32,"path":65,"stem":66,"children":67,"page":6},"Mobile SDKs","i-lucide-smartphone","\u002Fsdks\u002Fmobile","2.sdks\u002F3.mobile",[68],{"title":69,"path":70,"stem":71,"icon":56},"React Native","\u002Fsdks\u002Fmobile\u002Freact-native","2.sdks\u002F3.mobile\u002F1.react-native",{"title":73,"icon":74,"defaultOpen":32,"path":75,"stem":76,"children":77,"page":6},"Meta-framework SDKs","i-lucide-monitor-smartphone","\u002Fsdks\u002Fmeta","2.sdks\u002F4.meta",[78,83],{"title":79,"path":80,"stem":81,"icon":82},"Next.js","\u002Fsdks\u002Fmeta\u002Fnextjs","2.sdks\u002F4.meta\u002F1.nextjs","cd-logos-nextjs",{"title":84,"path":85,"stem":86,"icon":87},"Nuxt","\u002Fsdks\u002Fmeta\u002Fnuxt","2.sdks\u002F4.meta\u002F2.nuxt","cd-logos-nuxt",{"title":89,"icon":90,"defaultOpen":32,"path":91,"stem":92,"children":93,"page":6},"Server SDKs","i-lucide-server","\u002Fsdks\u002Fserver","2.sdks\u002F5.server",[94],{"title":95,"path":96,"stem":97,"icon":98},"Node.js","\u002Fsdks\u002Fserver\u002Fnode-js","2.sdks\u002F5.server\u002F1.node-js","cd-logos-nodejs",{"id":100,"title":53,"body":101,"description":107,"extension":2018,"links":2019,"meta":2020,"navigation":2021,"path":54,"seo":2022,"stem":55,"__hash__":2023},"docs\u002F2.sdks\u002F2.browser\u002F2.react.md",{"type":102,"value":103,"toc":2007},"minimark",[104,108,113,117,125,128,131,135,144,148,152,155,158,161,164,453,458,468,474,477,683,688,698,701,865,868,1234,1244,1247,1406,1411,1420,1426,1623,1628,1631,1635,1642,1645,1648,1838,1842,1845,1849,1856,1861,1971,2003],[105,106,107],"sdk-badge",{"icon":56},"React SDK",[109,110,112],"h2",{"id":111},"introduction","Introduction",[114,115,116],"p",{},"The React SDK is intended to be used by React web applications running on modern web browsers. All modern web browsers on popular platforms should be supported.",[114,118,119,120,124],{},"The minimum supported version of React is ",[121,122,123],"code",{},"16.8.0",".",[114,126,127],{},"Browser SDKs are tested on the latest versions of Chrome, Firefox, Safari, and Edge.",[114,129,130],{},"Telemetry collection within browser SDKs uses Web Workers to aggregate and send telemetry data. If the SDK runs on older browsers without Web Workers support, config evaluation will continue to work but no telemetry data will be collected for that session.",[109,132,134],{"id":133},"installation","Installation",[114,136,137,138],{},"The SDK can be installed from NPM: ",[139,140,141],"a",{"href":141,"rel":142},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@configdirector\u002Freact-web-sdk",[143],"nofollow",[145,146],"content-partial",{"name":147},"sdks\u002Freact\u002Finstall",[109,149,151],{"id":150},"configure-and-initialize-the-provider","Configure and initialize the provider",[114,153,154],{},"Initialize the provider with your client SDK key:",[145,156],{"name":157},"sdks\u002Freact\u002Fconfigure",[114,159,160],{},"Alternatively, you can initialize it with the HOC asynchronously and wait for initialization before starting your application. This can prevent the config values to flicker from the default value to the evaluated value during initialization.",[114,162,163],{},"An optional timeout can be provided to configure how long to await for the client to initialize before rendering the application. In the event of a timeout, the client will continue to attempt to connect in the background and config values will return the default value provided in code until a connection to ConfigDirector services is established.",[165,166,172],"pre",{"className":167,"code":168,"filename":169,"language":170,"meta":171,"style":171},"language-tsx shiki shiki-themes material-theme-lighter github-light github-dark","import { createRoot } from \"react-dom\u002Fclient\"\nimport App from \".\u002FApp\"\nimport { withProvider } from \"@configdirector\u002Freact-web-sdk\";\n\n(async () => {\n  const ConfigDirectorProvider = await withProvider({\n    sdkKey: \"YOUR-CLIENT-SDK-KEY\",\n    timeout: { 2_000 }, \u002F\u002F 2,000 milliseconds timeout, defaults to 3,000\n  });\n\n  createRoot(document.getElementById('root')!).render(\n    \u003CConfigDirectorProvider>\n      \u003CApp \u002F>\n    \u003C\u002FConfigDirectorProvider>\n  );\n})();\n","main.tsx","tsx","",[121,173,174,208,226,251,257,276,302,321,342,353,358,399,412,424,434,442],{"__ignoreMap":171},[175,176,179,183,187,191,194,197,201,205],"span",{"class":177,"line":178},"line",1,[175,180,182],{"class":181},"sVHd0","import",[175,184,186],{"class":185},"sP7_E"," {",[175,188,190],{"class":189},"su5hD"," createRoot",[175,192,193],{"class":185}," }",[175,195,196],{"class":181}," from",[175,198,200],{"class":199},"sjJ54"," \"",[175,202,204],{"class":203},"s_sjI","react-dom\u002Fclient",[175,206,207],{"class":199},"\"\n",[175,209,211,213,216,219,221,224],{"class":177,"line":210},2,[175,212,182],{"class":181},[175,214,215],{"class":189}," App ",[175,217,218],{"class":181},"from",[175,220,200],{"class":199},[175,222,223],{"class":203},".\u002FApp",[175,225,207],{"class":199},[175,227,229,231,233,236,238,240,242,245,248],{"class":177,"line":228},3,[175,230,182],{"class":181},[175,232,186],{"class":185},[175,234,235],{"class":189}," withProvider",[175,237,193],{"class":185},[175,239,196],{"class":181},[175,241,200],{"class":199},[175,243,244],{"class":203},"@configdirector\u002Freact-web-sdk",[175,246,247],{"class":199},"\"",[175,249,250],{"class":185},";\n",[175,252,254],{"class":177,"line":253},4,[175,255,256],{"emptyLinePlaceholder":32},"\n",[175,258,260,263,267,270,273],{"class":177,"line":259},5,[175,261,262],{"class":189},"(",[175,264,266],{"class":265},"sbsja","async",[175,268,269],{"class":185}," ()",[175,271,272],{"class":265}," =>",[175,274,275],{"class":185}," {\n",[175,277,279,282,286,290,293,296,299],{"class":177,"line":278},6,[175,280,281],{"class":265},"  const",[175,283,285],{"class":284},"s_hVV"," ConfigDirectorProvider",[175,287,289],{"class":288},"smGrS"," =",[175,291,292],{"class":181}," await",[175,294,235],{"class":295},"sGLFI",[175,297,262],{"class":298},"skxfh",[175,300,301],{"class":185},"{\n",[175,303,305,308,311,313,316,318],{"class":177,"line":304},7,[175,306,307],{"class":298},"    sdkKey",[175,309,310],{"class":185},":",[175,312,200],{"class":199},[175,314,315],{"class":203},"YOUR-CLIENT-SDK-KEY",[175,317,247],{"class":199},[175,319,320],{"class":185},",\n",[175,322,324,327,329,331,335,338],{"class":177,"line":323},8,[175,325,326],{"class":298},"    timeout",[175,328,310],{"class":185},[175,330,186],{"class":185},[175,332,334],{"class":333},"srdBf"," 2_000",[175,336,337],{"class":185}," },",[175,339,341],{"class":340},"sutJx"," \u002F\u002F 2,000 milliseconds timeout, defaults to 3,000\n",[175,343,345,348,351],{"class":177,"line":344},9,[175,346,347],{"class":185},"  }",[175,349,350],{"class":298},")",[175,352,250],{"class":185},[175,354,356],{"class":177,"line":355},10,[175,357,256],{"emptyLinePlaceholder":32},[175,359,361,364,366,369,371,374,376,379,382,384,386,389,391,393,396],{"class":177,"line":360},11,[175,362,363],{"class":295},"  createRoot",[175,365,262],{"class":298},[175,367,368],{"class":189},"document",[175,370,124],{"class":185},[175,372,373],{"class":295},"getElementById",[175,375,262],{"class":298},[175,377,378],{"class":199},"'",[175,380,381],{"class":203},"root",[175,383,378],{"class":199},[175,385,350],{"class":298},[175,387,388],{"class":288},"!",[175,390,350],{"class":298},[175,392,124],{"class":185},[175,394,395],{"class":295},"render",[175,397,398],{"class":298},"(\n",[175,400,402,405,409],{"class":177,"line":401},12,[175,403,404],{"class":185},"    \u003C",[175,406,408],{"class":407},"sZMiF","ConfigDirectorProvider",[175,410,411],{"class":185},">\n",[175,413,415,418,421],{"class":177,"line":414},13,[175,416,417],{"class":185},"      \u003C",[175,419,420],{"class":407},"App",[175,422,423],{"class":185}," \u002F>\n",[175,425,427,430,432],{"class":177,"line":426},14,[175,428,429],{"class":185},"    \u003C\u002F",[175,431,408],{"class":407},[175,433,411],{"class":185},[175,435,437,440],{"class":177,"line":436},15,[175,438,439],{"class":298},"  )",[175,441,250],{"class":185},[175,443,445,448,451],{"class":177,"line":444},16,[175,446,447],{"class":185},"}",[175,449,450],{"class":189},")()",[175,452,250],{"class":185},[454,455,457],"h3",{"id":456},"additional-configuration-options","Additional configuration options",[114,459,460,461,463,464,467],{},"These configuration options can be passed in to the ",[121,462,408],{}," or to the ",[121,465,466],{},"withProvider"," HOC as an object in the second argument.",[469,470,472],"h4",{"id":471},"context",[121,473,471],{},[114,475,476],{},"The user context to be used during targeting rules evaluation:",[165,478,480],{"className":167,"code":479,"filename":169,"language":170,"meta":171,"style":171},"import { createRoot } from \"react-dom\u002Fclient\";\nimport App from \".\u002FApp\";\nimport { ConfigDirectorProvider } from \"@configdirector\u002Freact-web-sdk\";\n\ncreateRoot(document.getElementById(\"root\")!).render(\n  \u003CConfigDirectorProvider\n    sdkKey=\"YOUR-CLIENT-SDK-KEY\"\n    context={{ id: \"12345\", name: \"Example User\", traits: { region: \"North America\" } }}>\n    \u003CApp \u002F>\n  \u003C\u002FConfigDirectorProvider>,\n);\n",[121,481,482,502,518,538,542,574,582,596,659,667,677],{"__ignoreMap":171},[175,483,484,486,488,490,492,494,496,498,500],{"class":177,"line":178},[175,485,182],{"class":181},[175,487,186],{"class":185},[175,489,190],{"class":189},[175,491,193],{"class":185},[175,493,196],{"class":181},[175,495,200],{"class":199},[175,497,204],{"class":203},[175,499,247],{"class":199},[175,501,250],{"class":185},[175,503,504,506,508,510,512,514,516],{"class":177,"line":210},[175,505,182],{"class":181},[175,507,215],{"class":189},[175,509,218],{"class":181},[175,511,200],{"class":199},[175,513,223],{"class":203},[175,515,247],{"class":199},[175,517,250],{"class":185},[175,519,520,522,524,526,528,530,532,534,536],{"class":177,"line":228},[175,521,182],{"class":181},[175,523,186],{"class":185},[175,525,285],{"class":189},[175,527,193],{"class":185},[175,529,196],{"class":181},[175,531,200],{"class":199},[175,533,244],{"class":203},[175,535,247],{"class":199},[175,537,250],{"class":185},[175,539,540],{"class":177,"line":253},[175,541,256],{"emptyLinePlaceholder":32},[175,543,544,547,550,552,554,556,558,560,562,564,566,568,570,572],{"class":177,"line":259},[175,545,546],{"class":295},"createRoot",[175,548,549],{"class":189},"(document",[175,551,124],{"class":185},[175,553,373],{"class":295},[175,555,262],{"class":189},[175,557,247],{"class":199},[175,559,381],{"class":203},[175,561,247],{"class":199},[175,563,350],{"class":189},[175,565,388],{"class":288},[175,567,350],{"class":189},[175,569,124],{"class":185},[175,571,395],{"class":295},[175,573,398],{"class":189},[175,575,576,579],{"class":177,"line":278},[175,577,578],{"class":185},"  \u003C",[175,580,581],{"class":407},"ConfigDirectorProvider\n",[175,583,584,587,590,592,594],{"class":177,"line":304},[175,585,307],{"class":586},"s9AJx",[175,588,589],{"class":288},"=",[175,591,247],{"class":199},[175,593,315],{"class":203},[175,595,207],{"class":199},[175,597,598,601,603,606,609,611,613,616,618,621,624,626,628,631,633,635,638,640,642,645,647,649,652,654,656],{"class":177,"line":323},[175,599,600],{"class":586},"    context",[175,602,589],{"class":288},[175,604,605],{"class":185},"{{",[175,607,608],{"class":298}," id",[175,610,310],{"class":185},[175,612,200],{"class":199},[175,614,615],{"class":203},"12345",[175,617,247],{"class":199},[175,619,620],{"class":185},",",[175,622,623],{"class":298}," name",[175,625,310],{"class":185},[175,627,200],{"class":199},[175,629,630],{"class":203},"Example User",[175,632,247],{"class":199},[175,634,620],{"class":185},[175,636,637],{"class":298}," traits",[175,639,310],{"class":185},[175,641,186],{"class":185},[175,643,644],{"class":298}," region",[175,646,310],{"class":185},[175,648,200],{"class":199},[175,650,651],{"class":203},"North America",[175,653,247],{"class":199},[175,655,193],{"class":185},[175,657,658],{"class":185}," }}>\n",[175,660,661,663,665],{"class":177,"line":344},[175,662,404],{"class":185},[175,664,420],{"class":407},[175,666,423],{"class":185},[175,668,669,672,674],{"class":177,"line":355},[175,670,671],{"class":185},"  \u003C\u002F",[175,673,408],{"class":407},[175,675,676],{"class":185},">,\n",[175,678,679,681],{"class":177,"line":360},[175,680,350],{"class":189},[175,682,250],{"class":185},[469,684,686],{"id":685},"logger",[121,687,685],{},[114,689,690,691,693,694,697],{},"By default, the SDK logs to the console and it is set to log warnings and errors only. You can configure a ",[121,692,685],{}," by either creating a ConfigDirector console logger with a different log level, or by implementing the ",[121,695,696],{},"ConfigDirectorLogger"," interface to provide your own logger. The interface can be used to create an adapter to another logging library.",[114,699,700],{},"Configure the ConfigDirector console logger to a different level:",[165,702,704],{"className":167,"code":703,"filename":169,"language":170,"meta":171,"style":171},"import { createRoot } from \"react-dom\u002Fclient\";\nimport App from \".\u002FApp\";\nimport { ConfigDirectorProvider, createConsoleLogger } from \"@configdirector\u002Freact-web-sdk\";\n\ncreateRoot(document.getElementById(\"root\")!).render(\n  \u003CConfigDirectorProvider sdkKey=\"YOUR-CLIENT-SDK-KEY\" logger={createConsoleLogger(\"debug\")}>\n    \u003CApp \u002F>\n  \u003C\u002FConfigDirectorProvider>,\n);\n",[121,705,706,726,742,767,771,801,843,851,859],{"__ignoreMap":171},[175,707,708,710,712,714,716,718,720,722,724],{"class":177,"line":178},[175,709,182],{"class":181},[175,711,186],{"class":185},[175,713,190],{"class":189},[175,715,193],{"class":185},[175,717,196],{"class":181},[175,719,200],{"class":199},[175,721,204],{"class":203},[175,723,247],{"class":199},[175,725,250],{"class":185},[175,727,728,730,732,734,736,738,740],{"class":177,"line":210},[175,729,182],{"class":181},[175,731,215],{"class":189},[175,733,218],{"class":181},[175,735,200],{"class":199},[175,737,223],{"class":203},[175,739,247],{"class":199},[175,741,250],{"class":185},[175,743,744,746,748,750,752,755,757,759,761,763,765],{"class":177,"line":228},[175,745,182],{"class":181},[175,747,186],{"class":185},[175,749,285],{"class":189},[175,751,620],{"class":185},[175,753,754],{"class":189}," createConsoleLogger",[175,756,193],{"class":185},[175,758,196],{"class":181},[175,760,200],{"class":199},[175,762,244],{"class":203},[175,764,247],{"class":199},[175,766,250],{"class":185},[175,768,769],{"class":177,"line":253},[175,770,256],{"emptyLinePlaceholder":32},[175,772,773,775,777,779,781,783,785,787,789,791,793,795,797,799],{"class":177,"line":259},[175,774,546],{"class":295},[175,776,549],{"class":189},[175,778,124],{"class":185},[175,780,373],{"class":295},[175,782,262],{"class":189},[175,784,247],{"class":199},[175,786,381],{"class":203},[175,788,247],{"class":199},[175,790,350],{"class":189},[175,792,388],{"class":288},[175,794,350],{"class":189},[175,796,124],{"class":185},[175,798,395],{"class":295},[175,800,398],{"class":189},[175,802,803,805,807,810,812,814,816,818,821,823,826,829,831,833,836,838,840],{"class":177,"line":278},[175,804,578],{"class":185},[175,806,408],{"class":407},[175,808,809],{"class":586}," sdkKey",[175,811,589],{"class":288},[175,813,247],{"class":199},[175,815,315],{"class":203},[175,817,247],{"class":199},[175,819,820],{"class":586}," logger",[175,822,589],{"class":288},[175,824,825],{"class":185},"{",[175,827,828],{"class":295},"createConsoleLogger",[175,830,262],{"class":189},[175,832,247],{"class":199},[175,834,835],{"class":203},"debug",[175,837,247],{"class":199},[175,839,350],{"class":189},[175,841,842],{"class":185},"}>\n",[175,844,845,847,849],{"class":177,"line":304},[175,846,404],{"class":185},[175,848,420],{"class":407},[175,850,423],{"class":185},[175,852,853,855,857],{"class":177,"line":323},[175,854,671],{"class":185},[175,856,408],{"class":407},[175,858,676],{"class":185},[175,860,861,863],{"class":177,"line":344},[175,862,350],{"class":189},[175,864,250],{"class":185},[114,866,867],{},"Implement your own logger adapter:",[165,869,871],{"className":167,"code":870,"filename":169,"language":170,"meta":171,"style":171},"import { createRoot } from \"react-dom\u002Fclient\";\nimport App from \".\u002FApp\";\nimport { ConfigDirectorProvider, ConfigDirectorLogger } from \"@configdirector\u002Freact-web-sdk\";\n\nconst myLogger: ConfigDirectorLogger = {\n  debug: function (message: string, ...args: any): void {\n    \u002F\u002F your specific logging library implementation here\n  },\n  info: function (message: string, ...args: any): void {\n    \u002F\u002F your specific logging library implementation here\n  },\n  warn: function (message: string, ...args: any): void {\n    \u002F\u002F your specific logging library implementation here\n  },\n  error: function (message: string, ...args: any): void {\n    \u002F\u002F your specific logging library implementation here\n  },\n};\n\ncreateRoot(document.getElementById(\"root\")!).render(\n  \u003CConfigDirectorProvider sdkKey=\"YOUR-CLIENT-SDK-KEY\" logger={myLogger}>\n    \u003CApp \u002F>\n  \u003C\u002FConfigDirectorProvider>,\n);\n",[121,872,873,893,909,934,938,955,999,1004,1009,1044,1048,1052,1087,1091,1095,1130,1134,1139,1145,1150,1181,1209,1218,1227],{"__ignoreMap":171},[175,874,875,877,879,881,883,885,887,889,891],{"class":177,"line":178},[175,876,182],{"class":181},[175,878,186],{"class":185},[175,880,190],{"class":189},[175,882,193],{"class":185},[175,884,196],{"class":181},[175,886,200],{"class":199},[175,888,204],{"class":203},[175,890,247],{"class":199},[175,892,250],{"class":185},[175,894,895,897,899,901,903,905,907],{"class":177,"line":210},[175,896,182],{"class":181},[175,898,215],{"class":189},[175,900,218],{"class":181},[175,902,200],{"class":199},[175,904,223],{"class":203},[175,906,247],{"class":199},[175,908,250],{"class":185},[175,910,911,913,915,917,919,922,924,926,928,930,932],{"class":177,"line":228},[175,912,182],{"class":181},[175,914,186],{"class":185},[175,916,285],{"class":189},[175,918,620],{"class":185},[175,920,921],{"class":189}," ConfigDirectorLogger",[175,923,193],{"class":185},[175,925,196],{"class":181},[175,927,200],{"class":199},[175,929,244],{"class":203},[175,931,247],{"class":199},[175,933,250],{"class":185},[175,935,936],{"class":177,"line":253},[175,937,256],{"emptyLinePlaceholder":32},[175,939,940,943,946,948,951,953],{"class":177,"line":259},[175,941,942],{"class":265},"const",[175,944,945],{"class":284}," myLogger",[175,947,310],{"class":288},[175,949,921],{"class":950},"sbgvK",[175,952,289],{"class":288},[175,954,275],{"class":185},[175,956,957,960,962,965,968,972,974,977,979,982,985,987,990,992,994,997],{"class":177,"line":278},[175,958,959],{"class":295},"  debug",[175,961,310],{"class":185},[175,963,964],{"class":265}," function",[175,966,967],{"class":185}," (",[175,969,971],{"class":970},"s99_P","message",[175,973,310],{"class":288},[175,975,976],{"class":407}," string",[175,978,620],{"class":185},[175,980,981],{"class":288}," ...",[175,983,984],{"class":970},"args",[175,986,310],{"class":288},[175,988,989],{"class":407}," any",[175,991,350],{"class":185},[175,993,310],{"class":288},[175,995,996],{"class":407}," void",[175,998,275],{"class":185},[175,1000,1001],{"class":177,"line":304},[175,1002,1003],{"class":340},"    \u002F\u002F your specific logging library implementation here\n",[175,1005,1006],{"class":177,"line":323},[175,1007,1008],{"class":185},"  },\n",[175,1010,1011,1014,1016,1018,1020,1022,1024,1026,1028,1030,1032,1034,1036,1038,1040,1042],{"class":177,"line":344},[175,1012,1013],{"class":295},"  info",[175,1015,310],{"class":185},[175,1017,964],{"class":265},[175,1019,967],{"class":185},[175,1021,971],{"class":970},[175,1023,310],{"class":288},[175,1025,976],{"class":407},[175,1027,620],{"class":185},[175,1029,981],{"class":288},[175,1031,984],{"class":970},[175,1033,310],{"class":288},[175,1035,989],{"class":407},[175,1037,350],{"class":185},[175,1039,310],{"class":288},[175,1041,996],{"class":407},[175,1043,275],{"class":185},[175,1045,1046],{"class":177,"line":355},[175,1047,1003],{"class":340},[175,1049,1050],{"class":177,"line":360},[175,1051,1008],{"class":185},[175,1053,1054,1057,1059,1061,1063,1065,1067,1069,1071,1073,1075,1077,1079,1081,1083,1085],{"class":177,"line":401},[175,1055,1056],{"class":295},"  warn",[175,1058,310],{"class":185},[175,1060,964],{"class":265},[175,1062,967],{"class":185},[175,1064,971],{"class":970},[175,1066,310],{"class":288},[175,1068,976],{"class":407},[175,1070,620],{"class":185},[175,1072,981],{"class":288},[175,1074,984],{"class":970},[175,1076,310],{"class":288},[175,1078,989],{"class":407},[175,1080,350],{"class":185},[175,1082,310],{"class":288},[175,1084,996],{"class":407},[175,1086,275],{"class":185},[175,1088,1089],{"class":177,"line":414},[175,1090,1003],{"class":340},[175,1092,1093],{"class":177,"line":426},[175,1094,1008],{"class":185},[175,1096,1097,1100,1102,1104,1106,1108,1110,1112,1114,1116,1118,1120,1122,1124,1126,1128],{"class":177,"line":436},[175,1098,1099],{"class":295},"  error",[175,1101,310],{"class":185},[175,1103,964],{"class":265},[175,1105,967],{"class":185},[175,1107,971],{"class":970},[175,1109,310],{"class":288},[175,1111,976],{"class":407},[175,1113,620],{"class":185},[175,1115,981],{"class":288},[175,1117,984],{"class":970},[175,1119,310],{"class":288},[175,1121,989],{"class":407},[175,1123,350],{"class":185},[175,1125,310],{"class":288},[175,1127,996],{"class":407},[175,1129,275],{"class":185},[175,1131,1132],{"class":177,"line":444},[175,1133,1003],{"class":340},[175,1135,1137],{"class":177,"line":1136},17,[175,1138,1008],{"class":185},[175,1140,1142],{"class":177,"line":1141},18,[175,1143,1144],{"class":185},"};\n",[175,1146,1148],{"class":177,"line":1147},19,[175,1149,256],{"emptyLinePlaceholder":32},[175,1151,1153,1155,1157,1159,1161,1163,1165,1167,1169,1171,1173,1175,1177,1179],{"class":177,"line":1152},20,[175,1154,546],{"class":295},[175,1156,549],{"class":189},[175,1158,124],{"class":185},[175,1160,373],{"class":295},[175,1162,262],{"class":189},[175,1164,247],{"class":199},[175,1166,381],{"class":203},[175,1168,247],{"class":199},[175,1170,350],{"class":189},[175,1172,388],{"class":288},[175,1174,350],{"class":189},[175,1176,124],{"class":185},[175,1178,395],{"class":295},[175,1180,398],{"class":189},[175,1182,1184,1186,1188,1190,1192,1194,1196,1198,1200,1202,1204,1207],{"class":177,"line":1183},21,[175,1185,578],{"class":185},[175,1187,408],{"class":407},[175,1189,809],{"class":586},[175,1191,589],{"class":288},[175,1193,247],{"class":199},[175,1195,315],{"class":203},[175,1197,247],{"class":199},[175,1199,820],{"class":586},[175,1201,589],{"class":288},[175,1203,825],{"class":185},[175,1205,1206],{"class":189},"myLogger",[175,1208,842],{"class":185},[175,1210,1212,1214,1216],{"class":177,"line":1211},22,[175,1213,404],{"class":185},[175,1215,420],{"class":407},[175,1217,423],{"class":185},[175,1219,1221,1223,1225],{"class":177,"line":1220},23,[175,1222,671],{"class":185},[175,1224,408],{"class":407},[175,1226,676],{"class":185},[175,1228,1230,1232],{"class":177,"line":1229},24,[175,1231,350],{"class":189},[175,1233,250],{"class":185},[469,1235,1237,1240,1241],{"id":1236},"appname-and-appversion",[121,1238,1239],{},"appName"," and ",[121,1242,1243],{},"appVersion",[114,1245,1246],{},"These options allow you to provide your application's name and version. These values can be used in targeting rules conditionals. For example, if a certain feature should only be enabled starting with a certain version of your application.",[165,1248,1250],{"className":167,"code":1249,"filename":169,"language":170,"meta":171,"style":171},"import { createRoot } from \"react-dom\u002Fclient\";\nimport App from \".\u002FApp\";\nimport { ConfigDirectorProvider } from \"@configdirector\u002Freact-web-sdk\";\n\ncreateRoot(document.getElementById(\"root\")!).render(\n  \u003CConfigDirectorProvider sdkKey=\"YOUR-CLIENT-SDK-KEY\" appName=\"YOUR-APP-NAME\" appVersion=\"1.0.2\">\n    \u003CApp \u002F>\n  \u003C\u002FConfigDirectorProvider>,\n);\n",[121,1251,1252,1272,1288,1308,1312,1342,1384,1392,1400],{"__ignoreMap":171},[175,1253,1254,1256,1258,1260,1262,1264,1266,1268,1270],{"class":177,"line":178},[175,1255,182],{"class":181},[175,1257,186],{"class":185},[175,1259,190],{"class":189},[175,1261,193],{"class":185},[175,1263,196],{"class":181},[175,1265,200],{"class":199},[175,1267,204],{"class":203},[175,1269,247],{"class":199},[175,1271,250],{"class":185},[175,1273,1274,1276,1278,1280,1282,1284,1286],{"class":177,"line":210},[175,1275,182],{"class":181},[175,1277,215],{"class":189},[175,1279,218],{"class":181},[175,1281,200],{"class":199},[175,1283,223],{"class":203},[175,1285,247],{"class":199},[175,1287,250],{"class":185},[175,1289,1290,1292,1294,1296,1298,1300,1302,1304,1306],{"class":177,"line":228},[175,1291,182],{"class":181},[175,1293,186],{"class":185},[175,1295,285],{"class":189},[175,1297,193],{"class":185},[175,1299,196],{"class":181},[175,1301,200],{"class":199},[175,1303,244],{"class":203},[175,1305,247],{"class":199},[175,1307,250],{"class":185},[175,1309,1310],{"class":177,"line":253},[175,1311,256],{"emptyLinePlaceholder":32},[175,1313,1314,1316,1318,1320,1322,1324,1326,1328,1330,1332,1334,1336,1338,1340],{"class":177,"line":259},[175,1315,546],{"class":295},[175,1317,549],{"class":189},[175,1319,124],{"class":185},[175,1321,373],{"class":295},[175,1323,262],{"class":189},[175,1325,247],{"class":199},[175,1327,381],{"class":203},[175,1329,247],{"class":199},[175,1331,350],{"class":189},[175,1333,388],{"class":288},[175,1335,350],{"class":189},[175,1337,124],{"class":185},[175,1339,395],{"class":295},[175,1341,398],{"class":189},[175,1343,1344,1346,1348,1350,1352,1354,1356,1358,1361,1363,1365,1368,1370,1373,1375,1377,1380,1382],{"class":177,"line":278},[175,1345,578],{"class":185},[175,1347,408],{"class":407},[175,1349,809],{"class":586},[175,1351,589],{"class":288},[175,1353,247],{"class":199},[175,1355,315],{"class":203},[175,1357,247],{"class":199},[175,1359,1360],{"class":586}," appName",[175,1362,589],{"class":288},[175,1364,247],{"class":199},[175,1366,1367],{"class":203},"YOUR-APP-NAME",[175,1369,247],{"class":199},[175,1371,1372],{"class":586}," appVersion",[175,1374,589],{"class":288},[175,1376,247],{"class":199},[175,1378,1379],{"class":203},"1.0.2",[175,1381,247],{"class":199},[175,1383,411],{"class":185},[175,1385,1386,1388,1390],{"class":177,"line":304},[175,1387,404],{"class":185},[175,1389,420],{"class":407},[175,1391,423],{"class":185},[175,1393,1394,1396,1398],{"class":177,"line":323},[175,1395,671],{"class":185},[175,1397,408],{"class":407},[175,1399,676],{"class":185},[175,1401,1402,1404],{"class":177,"line":344},[175,1403,350],{"class":189},[175,1405,250],{"class":185},[469,1407,1409],{"id":1408},"timeout",[121,1410,1408],{},[114,1412,1413,1414,1416,1417,1419],{},"The timeout, in milliseconds, to be used in initialization and when updating the context. This is how long the ",[121,1415,466],{}," HOC will wait for data from ConfigDirector services before resolving its Promise. If the timeout is reached, ",[121,1418,466],{}," will return but the client will still be in an unready status and returning default values. The client will continue to attempt to connect and retrieve config values in the background.",[114,1421,1422,1423,1425],{},"When using the ",[121,1424,408],{},", the timeout is not as relevant since initialization will happen asynchronously.",[165,1427,1429],{"className":167,"code":1428,"filename":169,"language":170,"meta":171,"style":171},"import { createRoot } from \"react-dom\u002Fclient\"\nimport App from \".\u002FApp\"\nimport { withProvider } from \"@configdirector\u002Freact-web-sdk\";\n\n(async () => {\n  const ConfigDirectorProvider = await withProvider({\n    sdkKey: \"YOUR-CLIENT-SDK-KEY\",\n    timeout: 2_000, \u002F\u002F 2,000 milliseconds timeout, defaults to 3,000\n  });\n\n  createRoot(document.getElementById('root')!).render(\n    \u003CConfigDirectorProvider>\n      \u003CApp \u002F>\n    \u003C\u002FConfigDirectorProvider>\n  );\n})();\n",[121,1430,1431,1449,1463,1483,1487,1499,1515,1529,1541,1549,1553,1585,1593,1601,1609,1615],{"__ignoreMap":171},[175,1432,1433,1435,1437,1439,1441,1443,1445,1447],{"class":177,"line":178},[175,1434,182],{"class":181},[175,1436,186],{"class":185},[175,1438,190],{"class":189},[175,1440,193],{"class":185},[175,1442,196],{"class":181},[175,1444,200],{"class":199},[175,1446,204],{"class":203},[175,1448,207],{"class":199},[175,1450,1451,1453,1455,1457,1459,1461],{"class":177,"line":210},[175,1452,182],{"class":181},[175,1454,215],{"class":189},[175,1456,218],{"class":181},[175,1458,200],{"class":199},[175,1460,223],{"class":203},[175,1462,207],{"class":199},[175,1464,1465,1467,1469,1471,1473,1475,1477,1479,1481],{"class":177,"line":228},[175,1466,182],{"class":181},[175,1468,186],{"class":185},[175,1470,235],{"class":189},[175,1472,193],{"class":185},[175,1474,196],{"class":181},[175,1476,200],{"class":199},[175,1478,244],{"class":203},[175,1480,247],{"class":199},[175,1482,250],{"class":185},[175,1484,1485],{"class":177,"line":253},[175,1486,256],{"emptyLinePlaceholder":32},[175,1488,1489,1491,1493,1495,1497],{"class":177,"line":259},[175,1490,262],{"class":189},[175,1492,266],{"class":265},[175,1494,269],{"class":185},[175,1496,272],{"class":265},[175,1498,275],{"class":185},[175,1500,1501,1503,1505,1507,1509,1511,1513],{"class":177,"line":278},[175,1502,281],{"class":265},[175,1504,285],{"class":284},[175,1506,289],{"class":288},[175,1508,292],{"class":181},[175,1510,235],{"class":295},[175,1512,262],{"class":298},[175,1514,301],{"class":185},[175,1516,1517,1519,1521,1523,1525,1527],{"class":177,"line":304},[175,1518,307],{"class":298},[175,1520,310],{"class":185},[175,1522,200],{"class":199},[175,1524,315],{"class":203},[175,1526,247],{"class":199},[175,1528,320],{"class":185},[175,1530,1531,1533,1535,1537,1539],{"class":177,"line":323},[175,1532,326],{"class":298},[175,1534,310],{"class":185},[175,1536,334],{"class":333},[175,1538,620],{"class":185},[175,1540,341],{"class":340},[175,1542,1543,1545,1547],{"class":177,"line":344},[175,1544,347],{"class":185},[175,1546,350],{"class":298},[175,1548,250],{"class":185},[175,1550,1551],{"class":177,"line":355},[175,1552,256],{"emptyLinePlaceholder":32},[175,1554,1555,1557,1559,1561,1563,1565,1567,1569,1571,1573,1575,1577,1579,1581,1583],{"class":177,"line":360},[175,1556,363],{"class":295},[175,1558,262],{"class":298},[175,1560,368],{"class":189},[175,1562,124],{"class":185},[175,1564,373],{"class":295},[175,1566,262],{"class":298},[175,1568,378],{"class":199},[175,1570,381],{"class":203},[175,1572,378],{"class":199},[175,1574,350],{"class":298},[175,1576,388],{"class":288},[175,1578,350],{"class":298},[175,1580,124],{"class":185},[175,1582,395],{"class":295},[175,1584,398],{"class":298},[175,1586,1587,1589,1591],{"class":177,"line":401},[175,1588,404],{"class":185},[175,1590,408],{"class":407},[175,1592,411],{"class":185},[175,1594,1595,1597,1599],{"class":177,"line":414},[175,1596,417],{"class":185},[175,1598,420],{"class":407},[175,1600,423],{"class":185},[175,1602,1603,1605,1607],{"class":177,"line":426},[175,1604,429],{"class":185},[175,1606,408],{"class":407},[175,1608,411],{"class":185},[175,1610,1611,1613],{"class":177,"line":436},[175,1612,439],{"class":298},[175,1614,250],{"class":185},[175,1616,1617,1619,1621],{"class":177,"line":444},[175,1618,447],{"class":185},[175,1620,450],{"class":189},[175,1622,250],{"class":185},[469,1624,1626],{"id":1625},"url",[121,1627,1625],{},[114,1629,1630],{},"The base URL used to connect to ConfigDirector services. This should only be provided if your environment requires you to configure a proxy server in order to connect to ConfigDirector services.",[109,1632,1634],{"id":1633},"retrieve-config-values","Retrieve config values",[114,1636,1637,1638,1641],{},"Retrieve a config value with the ",[121,1639,1640],{},"useConfigValue"," hook:",[145,1643],{"name":1644},"sdks\u002Freact\u002Fsimple-usage",[114,1646,1647],{},"You can also determine if the client is still initializing. This can be useful in the event of a slow connection where retrieving the initial config values may be slow, so rather than transition from the in-code default value to the evaluated value, you can show a loading state until the client is ready and config values are evaluated:",[165,1649,1652],{"className":167,"code":1650,"filename":1651,"language":170,"meta":171,"style":171},"import { useConfigValue } from \"@configdirector\u002Freact-web-sdk\";\n\nfunction YourComponent() {\n  const { value, loading } = useConfigValue(\"my-config\", \"default value\");\n\n  if (loading) {\n    return \u003Cp>Loading...\u003C\u002Fp>;\n  } else {\n    return \u003Cp>My config value: {value}\u003C\u002Fp>;\n  }\n}\n\nexport default YourComponent;\n","YourComponent.tsx",[121,1653,1654,1675,1679,1692,1734,1738,1753,1778,1787,1812,1817,1822,1826],{"__ignoreMap":171},[175,1655,1656,1658,1660,1663,1665,1667,1669,1671,1673],{"class":177,"line":178},[175,1657,182],{"class":181},[175,1659,186],{"class":185},[175,1661,1662],{"class":189}," useConfigValue",[175,1664,193],{"class":185},[175,1666,196],{"class":181},[175,1668,200],{"class":199},[175,1670,244],{"class":203},[175,1672,247],{"class":199},[175,1674,250],{"class":185},[175,1676,1677],{"class":177,"line":210},[175,1678,256],{"emptyLinePlaceholder":32},[175,1680,1681,1684,1687,1690],{"class":177,"line":228},[175,1682,1683],{"class":265},"function",[175,1685,1686],{"class":295}," YourComponent",[175,1688,1689],{"class":185},"()",[175,1691,275],{"class":185},[175,1693,1694,1696,1698,1701,1703,1706,1708,1710,1712,1714,1716,1719,1721,1723,1725,1728,1730,1732],{"class":177,"line":253},[175,1695,281],{"class":265},[175,1697,186],{"class":185},[175,1699,1700],{"class":284}," value",[175,1702,620],{"class":185},[175,1704,1705],{"class":284}," loading",[175,1707,193],{"class":185},[175,1709,289],{"class":288},[175,1711,1662],{"class":295},[175,1713,262],{"class":298},[175,1715,247],{"class":199},[175,1717,1718],{"class":203},"my-config",[175,1720,247],{"class":199},[175,1722,620],{"class":185},[175,1724,200],{"class":199},[175,1726,1727],{"class":203},"default value",[175,1729,247],{"class":199},[175,1731,350],{"class":298},[175,1733,250],{"class":185},[175,1735,1736],{"class":177,"line":259},[175,1737,256],{"emptyLinePlaceholder":32},[175,1739,1740,1743,1745,1748,1751],{"class":177,"line":278},[175,1741,1742],{"class":181},"  if",[175,1744,967],{"class":298},[175,1746,1747],{"class":189},"loading",[175,1749,1750],{"class":298},") ",[175,1752,301],{"class":185},[175,1754,1755,1758,1761,1764,1767,1770,1773,1775],{"class":177,"line":304},[175,1756,1757],{"class":181},"    return",[175,1759,1760],{"class":185}," \u003C",[175,1762,114],{"class":1763},"sQzsp",[175,1765,1766],{"class":185},">",[175,1768,1769],{"class":189},"Loading...",[175,1771,1772],{"class":185},"\u003C\u002F",[175,1774,114],{"class":1763},[175,1776,1777],{"class":185},">;\n",[175,1779,1780,1782,1785],{"class":177,"line":323},[175,1781,347],{"class":185},[175,1783,1784],{"class":181}," else",[175,1786,275],{"class":185},[175,1788,1789,1791,1793,1795,1797,1800,1802,1805,1808,1810],{"class":177,"line":344},[175,1790,1757],{"class":181},[175,1792,1760],{"class":185},[175,1794,114],{"class":1763},[175,1796,1766],{"class":185},[175,1798,1799],{"class":189},"My config value: ",[175,1801,825],{"class":185},[175,1803,1804],{"class":189},"value",[175,1806,1807],{"class":185},"}\u003C\u002F",[175,1809,114],{"class":1763},[175,1811,1777],{"class":185},[175,1813,1814],{"class":177,"line":355},[175,1815,1816],{"class":185},"  }\n",[175,1818,1819],{"class":177,"line":360},[175,1820,1821],{"class":185},"}\n",[175,1823,1824],{"class":177,"line":401},[175,1825,256],{"emptyLinePlaceholder":32},[175,1827,1828,1831,1834,1836],{"class":177,"line":414},[175,1829,1830],{"class":181},"export",[175,1832,1833],{"class":181}," default",[175,1835,1686],{"class":189},[175,1837,250],{"class":185},[109,1839,1841],{"id":1840},"update-the-user-context","Update the user context",[145,1843],{"name":1844},"sdks\u002Freact\u002Fuser-context",[1846,1847,1848],"note",{},"In client SDKs (browser and mobile), updating the user context re-establishes a new connection to ConfigDirector servers with the new context. While the new connection is in flight, config values will continue to evaluate to the currently cached values from the prior user context.",[109,1850,1852,1855],{"id":1851},"useclient-hook",[121,1853,1854],{},"useClient"," hook",[114,1857,1858,1859,1641],{},"In the event that you need to have access to the underlying Javascript ConfigDirectorClient instance for more complex behaviors, you can access the instance via the ",[121,1860,1854],{},[165,1862,1864],{"className":167,"code":1863,"filename":1651,"language":170,"meta":171,"style":171},"import { useClient } from \"@configdirector\u002Freact-web-sdk\";\n\nfunction YourComponent() {\n  const { client } = useClient();\n\n  \u002F\u002F Utilize the client for more involved logic\n\n  return \u003Cp>A more complex component\u003C\u002Fp>;\n}\n\nexport default YourComponent;\n",[121,1865,1866,1887,1891,1901,1920,1924,1929,1933,1953,1957,1961],{"__ignoreMap":171},[175,1867,1868,1870,1872,1875,1877,1879,1881,1883,1885],{"class":177,"line":178},[175,1869,182],{"class":181},[175,1871,186],{"class":185},[175,1873,1874],{"class":189}," useClient",[175,1876,193],{"class":185},[175,1878,196],{"class":181},[175,1880,200],{"class":199},[175,1882,244],{"class":203},[175,1884,247],{"class":199},[175,1886,250],{"class":185},[175,1888,1889],{"class":177,"line":210},[175,1890,256],{"emptyLinePlaceholder":32},[175,1892,1893,1895,1897,1899],{"class":177,"line":228},[175,1894,1683],{"class":265},[175,1896,1686],{"class":295},[175,1898,1689],{"class":185},[175,1900,275],{"class":185},[175,1902,1903,1905,1907,1910,1912,1914,1916,1918],{"class":177,"line":253},[175,1904,281],{"class":265},[175,1906,186],{"class":185},[175,1908,1909],{"class":284}," client",[175,1911,193],{"class":185},[175,1913,289],{"class":288},[175,1915,1874],{"class":295},[175,1917,1689],{"class":298},[175,1919,250],{"class":185},[175,1921,1922],{"class":177,"line":259},[175,1923,256],{"emptyLinePlaceholder":32},[175,1925,1926],{"class":177,"line":278},[175,1927,1928],{"class":340},"  \u002F\u002F Utilize the client for more involved logic\n",[175,1930,1931],{"class":177,"line":304},[175,1932,256],{"emptyLinePlaceholder":32},[175,1934,1935,1938,1940,1942,1944,1947,1949,1951],{"class":177,"line":323},[175,1936,1937],{"class":181},"  return",[175,1939,1760],{"class":185},[175,1941,114],{"class":1763},[175,1943,1766],{"class":185},[175,1945,1946],{"class":189},"A more complex component",[175,1948,1772],{"class":185},[175,1950,114],{"class":1763},[175,1952,1777],{"class":185},[175,1954,1955],{"class":177,"line":344},[175,1956,1821],{"class":185},[175,1958,1959],{"class":177,"line":355},[175,1960,256],{"emptyLinePlaceholder":32},[175,1962,1963,1965,1967,1969],{"class":177,"line":360},[175,1964,1830],{"class":181},[175,1966,1833],{"class":181},[175,1968,1686],{"class":189},[175,1970,250],{"class":185},[1972,1973,1974,1975,1977,1978,1240,1980,1983,1984,1986,1987,1990,1991,1994,1995,1998,1999,2002],"warning",{},"Proceed with caution when using the ",[121,1976,1854],{}," hook. The ",[121,1979,1640],{},[121,1981,1982],{},"useContext"," hooks manage listeners and cleanup automatically. However, if you make use of the ",[121,1985,1854],{}," hook, you must manage cleaning up any listeners yourself.",[1988,1989],"br",{},"\nAdditionally, any calls to ",[121,1992,1993],{},"dispose",", ",[121,1996,1997],{},"unwatch",", or ",[121,2000,2001],{},"unwatchAll"," on the client instance can have unintended side effects and may result in subtle bugs.",[2004,2005,2006],"style",{},"html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sbsja, html code.shiki .sbsja{--shiki-light:#9C3EDA;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .skxfh, html code.shiki .skxfh{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .srdBf, html code.shiki .srdBf{--shiki-light:#F76D47;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .sZMiF, html code.shiki .sZMiF{--shiki-light:#E2931D;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s99_P, html code.shiki .s99_P{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#E36209;--shiki-default-font-style:inherit;--shiki-dark:#FFAB70;--shiki-dark-font-style:inherit}html pre.shiki code .sQzsp, html code.shiki .sQzsp{--shiki-light:#E53935;--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":171,"searchDepth":210,"depth":210,"links":2008},[2009,2010,2011,2014,2015,2016],{"id":111,"depth":210,"text":112},{"id":133,"depth":210,"text":134},{"id":150,"depth":210,"text":151,"children":2012},[2013],{"id":456,"depth":228,"text":457},{"id":1633,"depth":210,"text":1634},{"id":1840,"depth":210,"text":1841},{"id":1851,"depth":210,"text":2017},"useClient hook","md",null,{},{"icon":56},{"title":53,"description":107},"uB0KLP-BHUmBdnCZQxoC5aerDXLg5r2-Xft8WH7obAM",[2025,2027],{"title":48,"path":49,"stem":50,"description":2026,"icon":51,"children":-1},"Javascript browser SDK",{"title":58,"path":59,"stem":60,"description":2028,"icon":61,"children":-1},"Vue SDK",{"id":2030,"title":2031,"body":2032,"description":171,"extension":2018,"links":2019,"meta":2107,"navigation":6,"path":2108,"seo":2109,"stem":2110,"__hash__":2111},"docs\u002F_partials\u002Fsdks\u002Freact\u002Finstall.md","Install",{"type":102,"value":2033,"toc":2105},[2034,2102],[2035,2036,2037,2059,2074,2088],"code-group",{},[165,2038,2043],{"className":2039,"code":2040,"filename":2041,"language":2042,"meta":171,"style":171},"language-bash shiki shiki-themes material-theme-lighter github-light github-dark","npm install --save @configdirector\u002Freact-web-sdk\n","npm","bash",[121,2044,2045],{"__ignoreMap":171},[175,2046,2047,2049,2052,2056],{"class":177,"line":178},[175,2048,2041],{"class":950},[175,2050,2051],{"class":203}," install",[175,2053,2055],{"class":2054},"stzsN"," --save",[175,2057,2058],{"class":203}," @configdirector\u002Freact-web-sdk\n",[165,2060,2063],{"className":2039,"code":2061,"filename":2062,"language":2042,"meta":171,"style":171},"yarn add @configdirector\u002Freact-web-sdk\n","yarn",[121,2064,2065],{"__ignoreMap":171},[175,2066,2067,2069,2072],{"class":177,"line":178},[175,2068,2062],{"class":950},[175,2070,2071],{"class":203}," add",[175,2073,2058],{"class":203},[165,2075,2078],{"className":2039,"code":2076,"filename":2077,"language":2042,"meta":48,"style":171},"pnpm add @configdirector\u002Freact-web-sdk\n","pnpm",[121,2079,2080],{"__ignoreMap":171},[175,2081,2082,2084,2086],{"class":177,"line":178},[175,2083,2077],{"class":950},[175,2085,2071],{"class":203},[175,2087,2058],{"class":203},[165,2089,2092],{"className":2039,"code":2090,"filename":2091,"language":2042,"meta":171,"style":171},"bun add @configdirector\u002Freact-web-sdk\n","bun",[121,2093,2094],{"__ignoreMap":171},[175,2095,2096,2098,2100],{"class":177,"line":178},[175,2097,2091],{"class":950},[175,2099,2071],{"class":203},[175,2101,2058],{"class":203},[2004,2103,2104],{},"html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .stzsN, html code.shiki .stzsN{--shiki-light:#91B859;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":171,"searchDepth":210,"depth":210,"links":2106},[],{},"\u002F_partials\u002Fsdks\u002Freact\u002Finstall",{"description":171},"_partials\u002Fsdks\u002Freact\u002Finstall","Ybxo2a8HU_iNTXBzZYAlktgPZsvq5RAa6yCqMVUR5-I",{"id":2113,"title":2114,"body":2115,"description":171,"extension":2018,"links":2019,"meta":2253,"navigation":6,"path":2254,"seo":2255,"stem":2256,"__hash__":2257},"docs\u002F_partials\u002Fsdks\u002Freact\u002Fconfigure.md","Configure",{"type":102,"value":2116,"toc":2251},[2117,2248],[165,2118,2120],{"className":167,"code":2119,"filename":169,"language":170,"meta":171,"style":171},"import { createRoot } from \"react-dom\u002Fclient\"\nimport App from \".\u002FApp\"\nimport { ConfigDirectorProvider } from \"@configdirector\u002Freact-web-sdk\";\n\ncreateRoot(document.getElementById(\"root\")!).render(\n  \u003CConfigDirectorProvider sdkKey=\"YOUR-CLIENT-SDK-KEY\">\n    \u003CApp \u002F>\n  \u003C\u002FConfigDirectorProvider>\n);\n",[121,2121,2122,2140,2154,2174,2178,2208,2226,2234,2242],{"__ignoreMap":171},[175,2123,2124,2126,2128,2130,2132,2134,2136,2138],{"class":177,"line":178},[175,2125,182],{"class":181},[175,2127,186],{"class":185},[175,2129,190],{"class":189},[175,2131,193],{"class":185},[175,2133,196],{"class":181},[175,2135,200],{"class":199},[175,2137,204],{"class":203},[175,2139,207],{"class":199},[175,2141,2142,2144,2146,2148,2150,2152],{"class":177,"line":210},[175,2143,182],{"class":181},[175,2145,215],{"class":189},[175,2147,218],{"class":181},[175,2149,200],{"class":199},[175,2151,223],{"class":203},[175,2153,207],{"class":199},[175,2155,2156,2158,2160,2162,2164,2166,2168,2170,2172],{"class":177,"line":228},[175,2157,182],{"class":181},[175,2159,186],{"class":185},[175,2161,285],{"class":189},[175,2163,193],{"class":185},[175,2165,196],{"class":181},[175,2167,200],{"class":199},[175,2169,244],{"class":203},[175,2171,247],{"class":199},[175,2173,250],{"class":185},[175,2175,2176],{"class":177,"line":253},[175,2177,256],{"emptyLinePlaceholder":32},[175,2179,2180,2182,2184,2186,2188,2190,2192,2194,2196,2198,2200,2202,2204,2206],{"class":177,"line":259},[175,2181,546],{"class":295},[175,2183,549],{"class":189},[175,2185,124],{"class":185},[175,2187,373],{"class":295},[175,2189,262],{"class":189},[175,2191,247],{"class":199},[175,2193,381],{"class":203},[175,2195,247],{"class":199},[175,2197,350],{"class":189},[175,2199,388],{"class":288},[175,2201,350],{"class":189},[175,2203,124],{"class":185},[175,2205,395],{"class":295},[175,2207,398],{"class":189},[175,2209,2210,2212,2214,2216,2218,2220,2222,2224],{"class":177,"line":278},[175,2211,578],{"class":185},[175,2213,408],{"class":407},[175,2215,809],{"class":586},[175,2217,589],{"class":288},[175,2219,247],{"class":199},[175,2221,315],{"class":203},[175,2223,247],{"class":199},[175,2225,411],{"class":185},[175,2227,2228,2230,2232],{"class":177,"line":304},[175,2229,404],{"class":185},[175,2231,420],{"class":407},[175,2233,423],{"class":185},[175,2235,2236,2238,2240],{"class":177,"line":323},[175,2237,671],{"class":185},[175,2239,408],{"class":407},[175,2241,411],{"class":185},[175,2243,2244,2246],{"class":177,"line":344},[175,2245,350],{"class":189},[175,2247,250],{"class":185},[2004,2249,2250],{},"html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZMiF, html code.shiki .sZMiF{--shiki-light:#E2931D;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":171,"searchDepth":210,"depth":210,"links":2252},[],{},"\u002F_partials\u002Fsdks\u002Freact\u002Fconfigure",{"description":171},"_partials\u002Fsdks\u002Freact\u002Fconfigure","i4mQKGavbV2BDzK0POKuRNJpotdiUAWAKrV4smXMvsg",{"id":2259,"title":2260,"body":2261,"description":171,"extension":2018,"links":2019,"meta":2392,"navigation":6,"path":2393,"seo":2394,"stem":2395,"__hash__":2396},"docs\u002F_partials\u002Fsdks\u002Freact\u002Fsimple-usage.md","Simple Usage",{"type":102,"value":2262,"toc":2390},[2263,2387],[165,2264,2266],{"className":167,"code":2265,"filename":1651,"language":170,"meta":171,"style":171},"import { useConfigValue } from \"@configdirector\u002Freact-web-sdk\";\n\nfunction YourComponent() {\n  const { value } = useConfigValue(\"my-config-key\", false);\n\n  return (\u003Cp>my-config-key: {value}\u003C\u002Fp>);\n}\n\nexport default YourComponent;\n",[121,2267,2268,2288,2292,2302,2335,2339,2369,2373,2377],{"__ignoreMap":171},[175,2269,2270,2272,2274,2276,2278,2280,2282,2284,2286],{"class":177,"line":178},[175,2271,182],{"class":181},[175,2273,186],{"class":185},[175,2275,1662],{"class":189},[175,2277,193],{"class":185},[175,2279,196],{"class":181},[175,2281,200],{"class":199},[175,2283,244],{"class":203},[175,2285,247],{"class":199},[175,2287,250],{"class":185},[175,2289,2290],{"class":177,"line":210},[175,2291,256],{"emptyLinePlaceholder":32},[175,2293,2294,2296,2298,2300],{"class":177,"line":228},[175,2295,1683],{"class":265},[175,2297,1686],{"class":295},[175,2299,1689],{"class":185},[175,2301,275],{"class":185},[175,2303,2304,2306,2308,2310,2312,2314,2316,2318,2320,2323,2325,2327,2331,2333],{"class":177,"line":253},[175,2305,281],{"class":265},[175,2307,186],{"class":185},[175,2309,1700],{"class":284},[175,2311,193],{"class":185},[175,2313,289],{"class":288},[175,2315,1662],{"class":295},[175,2317,262],{"class":298},[175,2319,247],{"class":199},[175,2321,2322],{"class":203},"my-config-key",[175,2324,247],{"class":199},[175,2326,620],{"class":185},[175,2328,2330],{"class":2329},"syTEX"," false",[175,2332,350],{"class":298},[175,2334,250],{"class":185},[175,2336,2337],{"class":177,"line":259},[175,2338,256],{"emptyLinePlaceholder":32},[175,2340,2341,2343,2345,2348,2350,2352,2355,2357,2359,2361,2363,2365,2367],{"class":177,"line":278},[175,2342,1937],{"class":181},[175,2344,967],{"class":298},[175,2346,2347],{"class":185},"\u003C",[175,2349,114],{"class":1763},[175,2351,1766],{"class":185},[175,2353,2354],{"class":189},"my-config-key: ",[175,2356,825],{"class":185},[175,2358,1804],{"class":189},[175,2360,1807],{"class":185},[175,2362,114],{"class":1763},[175,2364,1766],{"class":185},[175,2366,350],{"class":298},[175,2368,250],{"class":185},[175,2370,2371],{"class":177,"line":304},[175,2372,1821],{"class":185},[175,2374,2375],{"class":177,"line":323},[175,2376,256],{"emptyLinePlaceholder":32},[175,2378,2379,2381,2383,2385],{"class":177,"line":344},[175,2380,1830],{"class":181},[175,2382,1833],{"class":181},[175,2384,1686],{"class":189},[175,2386,250],{"class":185},[2004,2388,2389],{},"html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sbsja, html code.shiki .sbsja{--shiki-light:#9C3EDA;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .skxfh, html code.shiki .skxfh{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .syTEX, html code.shiki .syTEX{--shiki-light:#FF5370;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sQzsp, html code.shiki .sQzsp{--shiki-light:#E53935;--shiki-default:#22863A;--shiki-dark:#85E89D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":171,"searchDepth":210,"depth":210,"links":2391},[],{},"\u002F_partials\u002Fsdks\u002Freact\u002Fsimple-usage",{"description":171},"_partials\u002Fsdks\u002Freact\u002Fsimple-usage","mAPKPdiL9H4L4QpBNKipkoKj1x2-Agv9a0VGl9Yz9rs",{"id":2398,"title":2399,"body":2400,"description":2404,"extension":2018,"links":2019,"meta":2859,"navigation":6,"path":2860,"seo":2861,"stem":2862,"__hash__":2863},"docs\u002F_partials\u002Fsdks\u002Freact\u002Fuser-context.md","User Context",{"type":102,"value":2401,"toc":2857},[2402,2405,2588,2593,2854],[114,2403,2404],{},"A user context can be provided when initializing the provider:",[165,2406,2408],{"className":167,"code":2407,"filename":169,"language":170,"meta":171,"style":171},"import { createRoot } from \"react-dom\u002Fclient\"\nimport App from \".\u002FApp\"\nimport { ConfigDirectorProvider } from \"@configdirector\u002Freact-web-sdk\";\n\ncreateRoot(document.getElementById(\"root\")!).render(\n  \u003CConfigDirectorProvider\n    sdkKey=\"YOUR-CLIENT-SDK-KEY\"\n    context={{ id: \"12345\", name: \"Example User\", traits: { region: \"North America\" } }}>\n    \u003CApp \u002F>\n  \u003C\u002FConfigDirectorProvider>\n);\n",[121,2409,2410,2428,2442,2462,2466,2496,2502,2514,2566,2574,2582],{"__ignoreMap":171},[175,2411,2412,2414,2416,2418,2420,2422,2424,2426],{"class":177,"line":178},[175,2413,182],{"class":181},[175,2415,186],{"class":185},[175,2417,190],{"class":189},[175,2419,193],{"class":185},[175,2421,196],{"class":181},[175,2423,200],{"class":199},[175,2425,204],{"class":203},[175,2427,207],{"class":199},[175,2429,2430,2432,2434,2436,2438,2440],{"class":177,"line":210},[175,2431,182],{"class":181},[175,2433,215],{"class":189},[175,2435,218],{"class":181},[175,2437,200],{"class":199},[175,2439,223],{"class":203},[175,2441,207],{"class":199},[175,2443,2444,2446,2448,2450,2452,2454,2456,2458,2460],{"class":177,"line":228},[175,2445,182],{"class":181},[175,2447,186],{"class":185},[175,2449,285],{"class":189},[175,2451,193],{"class":185},[175,2453,196],{"class":181},[175,2455,200],{"class":199},[175,2457,244],{"class":203},[175,2459,247],{"class":199},[175,2461,250],{"class":185},[175,2463,2464],{"class":177,"line":253},[175,2465,256],{"emptyLinePlaceholder":32},[175,2467,2468,2470,2472,2474,2476,2478,2480,2482,2484,2486,2488,2490,2492,2494],{"class":177,"line":259},[175,2469,546],{"class":295},[175,2471,549],{"class":189},[175,2473,124],{"class":185},[175,2475,373],{"class":295},[175,2477,262],{"class":189},[175,2479,247],{"class":199},[175,2481,381],{"class":203},[175,2483,247],{"class":199},[175,2485,350],{"class":189},[175,2487,388],{"class":288},[175,2489,350],{"class":189},[175,2491,124],{"class":185},[175,2493,395],{"class":295},[175,2495,398],{"class":189},[175,2497,2498,2500],{"class":177,"line":278},[175,2499,578],{"class":185},[175,2501,581],{"class":407},[175,2503,2504,2506,2508,2510,2512],{"class":177,"line":304},[175,2505,307],{"class":586},[175,2507,589],{"class":288},[175,2509,247],{"class":199},[175,2511,315],{"class":203},[175,2513,207],{"class":199},[175,2515,2516,2518,2520,2522,2524,2526,2528,2530,2532,2534,2536,2538,2540,2542,2544,2546,2548,2550,2552,2554,2556,2558,2560,2562,2564],{"class":177,"line":323},[175,2517,600],{"class":586},[175,2519,589],{"class":288},[175,2521,605],{"class":185},[175,2523,608],{"class":298},[175,2525,310],{"class":185},[175,2527,200],{"class":199},[175,2529,615],{"class":203},[175,2531,247],{"class":199},[175,2533,620],{"class":185},[175,2535,623],{"class":298},[175,2537,310],{"class":185},[175,2539,200],{"class":199},[175,2541,630],{"class":203},[175,2543,247],{"class":199},[175,2545,620],{"class":185},[175,2547,637],{"class":298},[175,2549,310],{"class":185},[175,2551,186],{"class":185},[175,2553,644],{"class":298},[175,2555,310],{"class":185},[175,2557,200],{"class":199},[175,2559,651],{"class":203},[175,2561,247],{"class":199},[175,2563,193],{"class":185},[175,2565,658],{"class":185},[175,2567,2568,2570,2572],{"class":177,"line":344},[175,2569,404],{"class":185},[175,2571,420],{"class":407},[175,2573,423],{"class":185},[175,2575,2576,2578,2580],{"class":177,"line":355},[175,2577,671],{"class":185},[175,2579,408],{"class":407},[175,2581,411],{"class":185},[175,2583,2584,2586],{"class":177,"line":360},[175,2585,350],{"class":189},[175,2587,250],{"class":185},[114,2589,2590,2591,1641],{},"The user context can also be updated with the ",[121,2592,1982],{},[165,2594,2596],{"className":167,"code":2595,"filename":1651,"language":170,"meta":171,"style":171},"import { useConfigValue, useContext } from \"@configdirector\u002Freact-web-sdk\";\n\nfunction YourComponent() {\n  const { value: myConfigValue } = useConfigValue(\"my-config\", \"default value\");\n  const { updateContext } = useContext();\n\n  useEffect(() => {\n    updateContext({\n      id: \"654321\",\n      name: \"Another User\",\n      traits: {\n        region: \"Australia\",\n      },\n    });\n  }, []);\n\n  return (\u003Cp>My config value: {myConfigValue}\u003C\u002Fp>);\n}\n\nexport default YourComponent;\n",[121,2597,2598,2623,2627,2637,2677,2696,2700,2713,2722,2738,2754,2763,2779,2784,2793,2803,2807,2836,2840,2844],{"__ignoreMap":171},[175,2599,2600,2602,2604,2606,2608,2611,2613,2615,2617,2619,2621],{"class":177,"line":178},[175,2601,182],{"class":181},[175,2603,186],{"class":185},[175,2605,1662],{"class":189},[175,2607,620],{"class":185},[175,2609,2610],{"class":189}," useContext",[175,2612,193],{"class":185},[175,2614,196],{"class":181},[175,2616,200],{"class":199},[175,2618,244],{"class":203},[175,2620,247],{"class":199},[175,2622,250],{"class":185},[175,2624,2625],{"class":177,"line":210},[175,2626,256],{"emptyLinePlaceholder":32},[175,2628,2629,2631,2633,2635],{"class":177,"line":228},[175,2630,1683],{"class":265},[175,2632,1686],{"class":295},[175,2634,1689],{"class":185},[175,2636,275],{"class":185},[175,2638,2639,2641,2643,2646,2648,2651,2653,2655,2657,2659,2661,2663,2665,2667,2669,2671,2673,2675],{"class":177,"line":253},[175,2640,281],{"class":265},[175,2642,186],{"class":185},[175,2644,1700],{"class":2645},"sucvu",[175,2647,310],{"class":185},[175,2649,2650],{"class":284}," myConfigValue",[175,2652,193],{"class":185},[175,2654,289],{"class":288},[175,2656,1662],{"class":295},[175,2658,262],{"class":298},[175,2660,247],{"class":199},[175,2662,1718],{"class":203},[175,2664,247],{"class":199},[175,2666,620],{"class":185},[175,2668,200],{"class":199},[175,2670,1727],{"class":203},[175,2672,247],{"class":199},[175,2674,350],{"class":298},[175,2676,250],{"class":185},[175,2678,2679,2681,2683,2686,2688,2690,2692,2694],{"class":177,"line":259},[175,2680,281],{"class":265},[175,2682,186],{"class":185},[175,2684,2685],{"class":284}," updateContext",[175,2687,193],{"class":185},[175,2689,289],{"class":288},[175,2691,2610],{"class":295},[175,2693,1689],{"class":298},[175,2695,250],{"class":185},[175,2697,2698],{"class":177,"line":278},[175,2699,256],{"emptyLinePlaceholder":32},[175,2701,2702,2705,2707,2709,2711],{"class":177,"line":304},[175,2703,2704],{"class":295},"  useEffect",[175,2706,262],{"class":298},[175,2708,1689],{"class":185},[175,2710,272],{"class":265},[175,2712,275],{"class":185},[175,2714,2715,2718,2720],{"class":177,"line":323},[175,2716,2717],{"class":295},"    updateContext",[175,2719,262],{"class":298},[175,2721,301],{"class":185},[175,2723,2724,2727,2729,2731,2734,2736],{"class":177,"line":344},[175,2725,2726],{"class":298},"      id",[175,2728,310],{"class":185},[175,2730,200],{"class":199},[175,2732,2733],{"class":203},"654321",[175,2735,247],{"class":199},[175,2737,320],{"class":185},[175,2739,2740,2743,2745,2747,2750,2752],{"class":177,"line":355},[175,2741,2742],{"class":298},"      name",[175,2744,310],{"class":185},[175,2746,200],{"class":199},[175,2748,2749],{"class":203},"Another User",[175,2751,247],{"class":199},[175,2753,320],{"class":185},[175,2755,2756,2759,2761],{"class":177,"line":360},[175,2757,2758],{"class":298},"      traits",[175,2760,310],{"class":185},[175,2762,275],{"class":185},[175,2764,2765,2768,2770,2772,2775,2777],{"class":177,"line":401},[175,2766,2767],{"class":298},"        region",[175,2769,310],{"class":185},[175,2771,200],{"class":199},[175,2773,2774],{"class":203},"Australia",[175,2776,247],{"class":199},[175,2778,320],{"class":185},[175,2780,2781],{"class":177,"line":414},[175,2782,2783],{"class":185},"      },\n",[175,2785,2786,2789,2791],{"class":177,"line":426},[175,2787,2788],{"class":185},"    }",[175,2790,350],{"class":298},[175,2792,250],{"class":185},[175,2794,2795,2798,2801],{"class":177,"line":436},[175,2796,2797],{"class":185},"  },",[175,2799,2800],{"class":298}," [])",[175,2802,250],{"class":185},[175,2804,2805],{"class":177,"line":444},[175,2806,256],{"emptyLinePlaceholder":32},[175,2808,2809,2811,2813,2815,2817,2819,2821,2823,2826,2828,2830,2832,2834],{"class":177,"line":1136},[175,2810,1937],{"class":181},[175,2812,967],{"class":298},[175,2814,2347],{"class":185},[175,2816,114],{"class":1763},[175,2818,1766],{"class":185},[175,2820,1799],{"class":189},[175,2822,825],{"class":185},[175,2824,2825],{"class":189},"myConfigValue",[175,2827,1807],{"class":185},[175,2829,114],{"class":1763},[175,2831,1766],{"class":185},[175,2833,350],{"class":298},[175,2835,250],{"class":185},[175,2837,2838],{"class":177,"line":1141},[175,2839,1821],{"class":185},[175,2841,2842],{"class":177,"line":1147},[175,2843,256],{"emptyLinePlaceholder":32},[175,2845,2846,2848,2850,2852],{"class":177,"line":1152},[175,2847,1830],{"class":181},[175,2849,1833],{"class":181},[175,2851,1686],{"class":189},[175,2853,250],{"class":185},[2004,2855,2856],{},"html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZMiF, html code.shiki .sZMiF{--shiki-light:#E2931D;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .skxfh, html code.shiki .skxfh{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbsja, html code.shiki .sbsja{--shiki-light:#9C3EDA;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sucvu, html code.shiki .sucvu{--shiki-light:#E53935;--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sQzsp, html code.shiki .sQzsp{--shiki-light:#E53935;--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":171,"searchDepth":210,"depth":210,"links":2858},[],{},"\u002F_partials\u002Fsdks\u002Freact\u002Fuser-context",{"description":2404},"_partials\u002Fsdks\u002Freact\u002Fuser-context","KYJLhTjHrS6PZQ4Q1WoIQHsx_LsNR39L1cDJXtI2TM0",1781641012156]