CINXE.COM

<!doctype html> <html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-reference/technologies/client/web/react" data-has-hydrated="false"> <head> <meta charset="UTF-8"> <meta name="generator" content="Docusaurus v3.7.0"> <title data-rh="true">OpenFeature React SDK | OpenFeature</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://openfeature.dev/img/opengraph.jpg"><meta data-rh="true" name="twitter:image" content="https://openfeature.dev/img/opengraph.jpg"><meta data-rh="true" property="og:url" content="https://openfeature.dev/docs/reference/technologies/client/web/react"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="OpenFeature React SDK | OpenFeature"><meta data-rh="true" name="description" content="<!--"><meta data-rh="true" property="og:description" content="<!--"><link data-rh="true" rel="canonical" href="https://openfeature.dev/docs/reference/technologies/client/web/react"><link data-rh="true" rel="alternate" href="https://openfeature.dev/docs/reference/technologies/client/web/react" hreflang="en"><link data-rh="true" rel="alternate" href="https://openfeature.dev/docs/reference/technologies/client/web/react" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://PH0VDWFP7Q-dsn.algolia.net" crossorigin="anonymous"><link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="OpenFeature RSS Feed"> <link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="OpenFeature Atom Feed"> <link rel="search" type="application/opensearchdescription+xml" title="OpenFeature" href="/opensearch.xml"> <link rel="preconnect" href="https://www.google-analytics.com"> <link rel="preconnect" href="https://www.googletagmanager.com"> <script async src="https://www.googletagmanager.com/gtag/js?id=G-ZG0JSPYJXZ"></script> <script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-ZG0JSPYJXZ",{anonymize_ip:!0})</script> <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon-precomposed.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png"> <link rel="icon" type="image/svg+xml" href="/favicons/favicon-light.svg"> <link rel="shortcut icon" type="image/x-icon" href="/favicons/favicon.ico"> <link rel="manifest" href="/favicons/site.webmanifest"> <meta name="theme-color" content="#ffffff"> <meta name="msapplication-config" content="/favicons/browserconfig.xml"><link rel="stylesheet" href="/assets/css/styles.385ab5b9.css"> <script src="/assets/js/runtime~main.aa35e229.js" defer="defer"></script> <script src="/assets/js/main.2feeef09.js" defer="defer"></script> </head> <body class="navigation-with-keyboard"> <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const a=new URLSearchParams(window.location.search).entries();for(var[t,e]of a)if(t.startsWith("docusaurus-data-")){var n=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(n,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"><link rel="preload" as="image" href="/img/logo-dark.svg"><link rel="preload" as="image" href="/img/logo-light.svg"><link rel="preload" as="image" href="https://img.shields.io/static/v1?label=specification&message=v0.8.0&color=yellow&style=for-the-badge"><link rel="preload" as="image" href="https://img.shields.io/static/v1?label=release&message=v0.4.11&color=blue&style=for-the-badge"><link rel="preload" as="image" href="https://codecov.io/gh/open-feature/js-sdk/branch/main/graph/badge.svg?token=3DC5XOEHMY"><link rel="preload" as="image" href="https://img.shields.io/npm/dm/%40openfeature%2Freact-sdk"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="announcementBar_mb4j" role="banner"><div class="announcementBarPlaceholder_vyr4"></div><div class="content_knG7 announcementBarContent_xLdY">We're back! Check out all the ways you can connect with us at <a href="/blog/kubeconeu25">KubeCon + CloudNativeCon Europe 2025</a>.</div><button type="button" aria-label="Close" class="clean-btn close closeButton_CVFx announcementBarClose_gvF7"><svg viewBox="0 0 15 15" width="14" height="14"><g stroke="currentColor" stroke-width="3.1"><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path></g></svg></button></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/logo-dark.svg" alt="OpenFeature Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo-light.svg" alt="OpenFeature Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/reference/intro">Docs</a><a class="navbar__item navbar__link" href="/specification/">Specification</a><a class="navbar__item navbar__link" href="/ecosystem">Ecosystem</a><a class="navbar__item navbar__link" href="/community/">Community</a><a class="navbar__item navbar__link" href="/support-training">Support & Training</a><a class="navbar__item navbar__link" href="/docs/tutorials/five-minutes-to-feature-flags">Tutorials</a><a class="navbar__item navbar__link" href="/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/open-feature" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link header-github-link" aria-label="GitHub organization"></a><div class="toggle_nTvT colorModeToggle_DEke"><button class="clean-btn toggleButton_gYZh toggleButtonDisabled_zh5C" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><div class="toggleLogo_HXbd"><div class="toggleIcon_U8RU"><div class="track_Vm51"><div></div></div></div></div></button></div><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg>Search</button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG menuWithAnnouncementBar_GW3s"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/reference/intro">Introduction</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/docs/category/concepts">Concepts</a><button aria-label="Collapse sidebar category 'Concepts'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/reference/concepts/evaluation-api">Evaluation API</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/reference/concepts/provider">Providers</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/reference/concepts/evaluation-context">Evaluation Context</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/reference/concepts/hooks">Hooks</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/reference/concepts/events">Events</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/reference/concepts/sdk-paradigms">SDK Paradigms</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/reference/concepts/tracking">Tracking</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/docs/reference/technologies/">Technologies</a><button aria-label="Collapse sidebar category 'Technologies'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/reference/technologies/sdk-compatibility">SDK Compatibility Overview</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/docs/reference/technologies/server/">Server</a><button aria-label="Collapse sidebar category 'Server'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/reference/technologies/server/dotnet">.NET</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/reference/technologies/server/go">Go</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/reference/technologies/server/java">Java</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/docs/reference/technologies/server/javascript/">Node.js</a><button aria-label="Collapse sidebar category 'Node.js'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/reference/technologies/server/javascript/nestjs">NestJS</a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/reference/technologies/server/php">PHP</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/reference/technologies/server/python">Python</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/reference/technologies/server/ruby">Ruby</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/reference/technologies/server/rust">Rust</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/docs/reference/technologies/client/">Client</a><button aria-label="Collapse sidebar category 'Client'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/reference/technologies/client/kotlin">Android</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/reference/technologies/client/swift">iOS</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/docs/reference/technologies/client/web/">Web</a><button aria-label="Collapse sidebar category 'Web'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/reference/technologies/client/web/angular">Angular</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/docs/reference/technologies/client/web/react">React</a></li></ul></li></ul></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/reference/contributing">Contributing</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><a class="breadcrumbs__link" itemprop="item" href="/docs/reference/technologies/">Technologies</a><meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><a class="breadcrumbs__link" itemprop="item" href="/docs/reference/technologies/client/">Client</a><meta itemprop="position" content="2"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><a class="breadcrumbs__link" itemprop="item" href="/docs/reference/technologies/client/web/">Web</a><meta itemprop="position" content="3"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active">React<meta itemprop="position" content="4"></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>OpenFeature React SDK</h1></header><a href="https://github.com/open-feature/spec/releases/tag/v0.8.0"><img alt="Specification" src="https://img.shields.io/static/v1?label=specification&message=v0.8.0&color=yellow&style=for-the-badge"></a><a href="https://github.com/open-feature/js-sdk/releases/tag/react-sdk-v0.4.11"><img alt="Release" src="https://img.shields.io/static/v1?label=release&message=v0.4.11&color=blue&style=for-the-badge"></a> <a href="https://codecov.io/gh/open-feature/js-sdk"><img alt="codecov" src="https://codecov.io/gh/open-feature/js-sdk/branch/main/graph/badge.svg?token=3DC5XOEHMY"></a><a href="https://www.npmjs.com/package/@openfeature/react-sdk"><img alt="NPM Download" src="https://img.shields.io/npm/dm/%40openfeature%2Freact-sdk"></a> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="overview">Overview<a href="#overview" class="hash-link" aria-label="Direct link to Overview" title="Direct link to Overview"></a></h2> The OpenFeature React SDK adds React-specific functionality to the <a href="/docs/reference/technologies/client/web">OpenFeature Web SDK</a>. In addition to the feature provided by the <a href="/docs/reference/technologies/client/web">web sdk</a>, capabilities include: <ul> <li><a href="#overview">Overview</a></li> <li><a href="#quick-start">Quick start</a> <ul> <li><a href="#requirements">Requirements</a></li> <li><a href="#install">Install</a> <ul> <li><a href="#npm">npm</a></li> <li><a href="#yarn">yarn</a></li> <li><a href="#required-peer-dependencies">Required peer dependencies</a></li> </ul> </li> <li><a href="#usage">Usage</a> <ul> <li><a href="#openfeatureprovider-context-provider">OpenFeatureProvider context provider</a></li> <li><a href="#evaluation-hooks">Evaluation hooks</a></li> <li><a href="#multiple-providers-and-domains">Multiple Providers and Domains</a></li> <li><a href="#re-rendering-with-context-changes">Re-rendering with Context Changes</a></li> <li><a href="#re-rendering-with-flag-configuration-changes">Re-rendering with Flag Configuration Changes</a></li> <li><a href="#suspense-support">Suspense Support</a></li> <li><a href="#tracking">Tracking</a></li> </ul> </li> <li><a href="#testing">Testing</a></li> </ul> </li> <li><a href="#faq-and-troubleshooting">FAQ and troubleshooting</a></li> <li><a href="#resources">Resources</a></li> </ul> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="quick-start">Quick start<a href="#quick-start" class="hash-link" aria-label="Direct link to Quick start" title="Direct link to Quick start"></a></h2> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="requirements">Requirements<a href="#requirements" class="hash-link" aria-label="Direct link to Requirements" title="Direct link to Requirements"></a></h3> <ul> <li>ES2015-compatible web browser (Chrome, Edge, Firefox, etc)</li> <li>React version 16.8+</li> </ul> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="install">Install<a href="#install" class="hash-link" aria-label="Direct link to Install" title="Direct link to Install"></a></h3> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="npm">npm<a href="#npm" class="hash-link" aria-label="Direct link to npm" title="Direct link to npm"></a></h4> <div class="language-sh codeBlockContainer_Ckt0 theme-code-block" style="--prism-background-color:#282c34;--prism-color:#ffffff"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-sh codeBlock_bY9V thin-scrollbar" style="background-color:#282c34;color:#ffffff"><code class="codeBlockLines_e6Vv">npm install --save @openfeature/react-sdk </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="yarn">yarn<a href="#yarn" class="hash-link" aria-label="Direct link to yarn" title="Direct link to yarn"></a></h4> <div class="language-sh codeBlockContainer_Ckt0 theme-code-block" style="--prism-background-color:#282c34;--prism-color:#ffffff"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-sh codeBlock_bY9V thin-scrollbar" style="background-color:#282c34;color:#ffffff"><code class="codeBlockLines_e6Vv"># yarn requires manual installation of the peer dependencies (see below) yarn add @openfeature/react-sdk @openfeature/web-sdk @openfeature/core </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="required-peer-dependencies">Required peer dependencies<a href="#required-peer-dependencies" class="hash-link" aria-label="Direct link to Required peer dependencies" title="Direct link to Required peer dependencies"></a></h4> The following list contains the peer dependencies of <code>@openfeature/react-sdk</code>. See the <a href="https://github.com/open-feature/js-sdk/blob/main/packages/react/package.json" target="_blank" rel="noopener noreferrer">package.json</a> for the required versions. <ul> <li><code>@openfeature/web-sdk</code></li> <li><code>react</code></li> </ul> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="usage">Usage<a href="#usage" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h3> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="openfeatureprovider-context-provider">OpenFeatureProvider context provider<a href="#openfeatureprovider-context-provider" class="hash-link" aria-label="Direct link to OpenFeatureProvider context provider" title="Direct link to OpenFeatureProvider context provider"></a></h4> The <code>OpenFeatureProvider</code> is a <a href="https://react.dev/reference/react/createContext#provider" target="_blank" rel="noopener noreferrer">React context provider</a> which represents a scope for feature flag evaluations within a React application. It binds an OpenFeature client to all evaluations within child components, and allows the use of evaluation hooks. The example below shows how to use the <code>OpenFeatureProvider</code> with OpenFeature's <code>InMemoryProvider</code>. <div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-background-color:#282c34;--prism-color:#ffffff"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="background-color:#282c34;color:#ffffff"><code class="codeBlockLines_e6Vv">import { EvaluationContext, OpenFeatureProvider, useFlag, OpenFeature, InMemoryProvider } from '@openfeature/react-sdk'; const flagConfig = { 'new-message': { disabled: false, variants: { on: true, off: false, }, defaultVariant: "on", contextEvaluator: (context: EvaluationContext) => { if (context.silly) { return 'on'; } return 'off' } }, }; // Instantiate and set our provider (be sure this only happens once)! // Note: there's no need to await its initialization, the React SDK handles re-rendering and suspense for you! OpenFeature.setProvider(new InMemoryProvider(flagConfig)); // Enclose your content in the configured provider function App() { return ( <OpenFeatureProvider> <Page></Page> </OpenFeatureProvider> ); } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="evaluation-hooks">Evaluation hooks<a href="#evaluation-hooks" class="hash-link" aria-label="Direct link to Evaluation hooks" title="Direct link to Evaluation hooks"></a></h4> Within the provider, you can use the various evaluation hooks to evaluate flags. <div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-background-color:#282c34;--prism-color:#ffffff"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="background-color:#282c34;color:#ffffff"><code class="codeBlockLines_e6Vv">function Page() { // Use the "query-style" flag evaluation hook, specifying a flag-key and a default value. const { value: showNewMessage } = useFlag('new-message', true); return ( <div className="App"> <header className="App-header"> {showNewMessage ? <p>Welcome to this OpenFeature-enabled React app!</p> : <p>Welcome to this React app.</p>} </header> </div> ) } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> You can use the strongly typed flag value and flag evaluation detail hooks as well if you prefer. <div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-background-color:#282c34;--prism-color:#ffffff"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="background-color:#282c34;color:#ffffff"><code class="codeBlockLines_e6Vv">import { useBooleanFlagValue } from '@openfeature/react-sdk'; // boolean flag evaluation const value = useBooleanFlagValue('new-message', false); </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> <div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-background-color:#282c34;--prism-color:#ffffff"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="background-color:#282c34;color:#ffffff"><code class="codeBlockLines_e6Vv">import { useBooleanFlagDetails } from '@openfeature/react-sdk'; // "detailed" boolean flag evaluation const { value, variant, reason, flagMetadata } = useBooleanFlagDetails('new-message', false); </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="multiple-providers-and-domains">Multiple Providers and Domains<a href="#multiple-providers-and-domains" class="hash-link" aria-label="Direct link to Multiple Providers and Domains" title="Direct link to Multiple Providers and Domains"></a></h4> Multiple providers can be used by passing a <code>domain</code> to the <code>OpenFeatureProvider</code>: <div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-background-color:#282c34;--prism-color:#ffffff"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="background-color:#282c34;color:#ffffff"><code class="codeBlockLines_e6Vv">// Flags within this domain will use the client/provider associated with `my-domain`, function App() { return ( <OpenFeatureProvider domain={'my-domain'}> <Page></Page> </OpenFeatureProvider> ); } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> This is analogous to: <div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-background-color:#282c34;--prism-color:#ffffff"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="background-color:#282c34;color:#ffffff"><code class="codeBlockLines_e6Vv">OpenFeature.getClient('my-domain'); </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> For more information about <code>domains</code>, refer to the <a href="https://github.com/open-feature/js-sdk/blob/main/packages/web/README.md" target="_blank" rel="noopener noreferrer">web SDK</a>. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="re-rendering-with-context-changes">Re-rendering with Context Changes<a href="#re-rendering-with-context-changes" class="hash-link" aria-label="Direct link to Re-rendering with Context Changes" title="Direct link to Re-rendering with Context Changes"></a></h4> By default, if the OpenFeature <a href="/docs/reference/concepts/evaluation-context">evaluation context</a> is modified, components will be re-rendered. This is useful in cases where flag values are dependant on user-attributes or other application state (user logged in, items in card, etc). You can disable this feature in the hook options (or in the <a href="#openfeatureprovider-context-provider">OpenFeatureProvider</a>): <div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-background-color:#282c34;--prism-color:#ffffff"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="background-color:#282c34;color:#ffffff"><code class="codeBlockLines_e6Vv">function Page() { const { value: showNewMessage } = useFlag('new-message', false, { updateOnContextChanged: false }); return ( <div className="App"> <header className="App-header"> {showNewMessage ? <p>Welcome to this OpenFeature-enabled React app!</p> : <p>Welcome to this React app.</p>} </header> </div> ); } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> For more information about how evaluation context works in the React SDK, see the documentation on OpenFeature's <a href="/specification/glossary/#static-context-paradigm">static context SDK paradigm</a>. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="re-rendering-with-flag-configuration-changes">Re-rendering with Flag Configuration Changes<a href="#re-rendering-with-flag-configuration-changes" class="hash-link" aria-label="Direct link to Re-rendering with Flag Configuration Changes" title="Direct link to Re-rendering with Flag Configuration Changes"></a></h4> By default, if the underlying provider emits a <code>ConfigurationChanged</code> event, components will be re-rendered. This is useful if you want your UI to immediately reflect changes in the backend flag configuration. You can disable this feature in the hook options (or in the <a href="#openfeatureprovider-context-provider">OpenFeatureProvider</a>): <div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-background-color:#282c34;--prism-color:#ffffff"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="background-color:#282c34;color:#ffffff"><code class="codeBlockLines_e6Vv">function Page() { const { value: showNewMessage } = useFlag('new-message', false, { updateOnConfigurationChanged: false }); return ( <div className="App"> <header className="App-header"> {showNewMessage ? <p>Welcome to this OpenFeature-enabled React app!</p> : <p>Welcome to this React app.</p>} </header> </div> ); } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> If your provider doesn't support updates, this configuration has no impact. <div class="markdown-alert markdown-alert-note"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"></path><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"></path></svg>Note If your provider includes a list of <a href="https://open-feature.github.io/js-sdk/types/_openfeature_server_sdk.ConfigChangeEvent.html" target="_blank" rel="noopener noreferrer">flags changed</a> in its <code>PROVIDER_CONFIGURATION_CHANGED</code> event, that list of flags is used to decide which flag evaluation hooks should re-run by diffing the latest value of these flags with the previous render. If your provider event does not the include the <code>flags changed</code> list, then the SDK diffs all flags with the previous render to determine which hooks should re-run. </div> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="suspense-support">Suspense Support<a href="#suspense-support" class="hash-link" aria-label="Direct link to Suspense Support" title="Direct link to Suspense Support"></a></h4> <div class="markdown-alert markdown-alert-note"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"></path><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"></path></svg>Note React suspense is an experimental feature and is subject to change in future versions. </div> Frequently, providers need to perform some initial startup tasks. It may be desirable not to display components with feature flags until this is complete or when the context changes. Built-in <a href="https://react.dev/reference/react/Suspense" target="_blank" rel="noopener noreferrer">suspense</a> support makes this easy. Use <code>useSuspenseFlag</code> or pass <code>{ suspend: true }</code> in the hook options to leverage this functionality. <div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-background-color:#282c34;--prism-color:#ffffff"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="background-color:#282c34;color:#ffffff"><code class="codeBlockLines_e6Vv">function Content() { // cause the "fallback" to be displayed if the component uses feature flags and the provider is not ready return ( <Suspense fallback={<Fallback />}> <Message /> </Suspense> ); } function Message() { // component to render after READY, equivalent to useFlag('new-message', false, { suspend: true }); const { value: showNewMessage } = useSuspenseFlag('new-message', false); return ( <> {showNewMessage ? ( <p>Welcome to this OpenFeature-enabled React app!</p> ) : ( <p>Welcome to this plain old React app!</p> )} </> ); } function Fallback() { // component to render before READY. return <p>Waiting for provider to be ready...</p>; } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> This can be disabled in the hook options (or in the <a href="#openfeatureprovider-context-provider">OpenFeatureProvider</a>). <h4 class="anchor anchorWithStickyNavbar_LWe7" id="tracking">Tracking<a href="#tracking" class="hash-link" aria-label="Direct link to Tracking" title="Direct link to Tracking"></a></h4> The tracking API allows you to use OpenFeature abstractions and objects to associate user actions with feature flag evaluations. This is essential for robust experimentation powered by feature flags. For example, a flag enhancing the appearance of a UI component might drive user engagement to a new feature; to test this hypothesis, telemetry collected by a <a href="/docs/reference/technologies/client/web/#hooks">hook</a> or <a href="/docs/reference/technologies/client/web/#providers">provider</a> can be associated with telemetry reported in the client's <code>track</code> function. The React SDK includes a hook for firing tracking events in the <code><OpenFeatureProvider></code> context in use: <div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-background-color:#282c34;--prism-color:#ffffff"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="background-color:#282c34;color:#ffffff"><code class="codeBlockLines_e6Vv">function MyComponent() { // get a tracking function for this <OpenFeatureProvider>. const { track } = useTrack(); // call the tracking event // can be done in render, useEffect, or in handlers, depending on your use case track(eventName, trackingDetails); return <>...</>; } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="testing">Testing<a href="#testing" class="hash-link" aria-label="Direct link to Testing" title="Direct link to Testing"></a></h3> The React SDK includes a built-in context provider for testing. This allows you to easily test components that use evaluation hooks, such as <code>useFlag</code>. If you try to test a component (in this case, <code>MyComponent</code>) which uses an evaluation hook, you might see an error message like: <blockquote> No OpenFeature client available - components using OpenFeature must be wrapped with an <code><OpenFeatureProvider></code>. </blockquote> You can resolve this by simply wrapping your component under test in the OpenFeatureTestProvider: <div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-background-color:#282c34;--prism-color:#ffffff"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="background-color:#282c34;color:#ffffff"><code class="codeBlockLines_e6Vv">// use default values for all evaluations <OpenFeatureTestProvider> <MyComponent /> </OpenFeatureTestProvider> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> The basic configuration above will simply use the default value provided in code. If you'd like to control the values returned by the evaluation hooks, you can pass a map of flag keys and values: <div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-background-color:#282c34;--prism-color:#ffffff"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="background-color:#282c34;color:#ffffff"><code class="codeBlockLines_e6Vv">// return `true` for all evaluations of `'my-boolean-flag'` <OpenFeatureTestProvider flagValueMap={{ 'my-boolean-flag': true }}> <MyComponent /> </OpenFeatureTestProvider> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> Additionally, you can pass an artificial delay for the provider startup to test your suspense boundaries or loaders/spinners impacted by feature flags: <div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-background-color:#282c34;--prism-color:#ffffff"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="background-color:#282c34;color:#ffffff"><code class="codeBlockLines_e6Vv">// delay the provider start by 1000ms and then return `true` for all evaluations of `'my-boolean-flag'` <OpenFeatureTestProvider delayMs={1000} flagValueMap={{ 'my-boolean-flag': true }}> <MyComponent /> </OpenFeatureTestProvider> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> For maximum control, you can also pass your own mock provider implementation. The type of this option is <code>Partial<Provider></code>, so you can pass an incomplete implementation: <div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-background-color:#282c34;--prism-color:#ffffff"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="background-color:#282c34;color:#ffffff"><code class="codeBlockLines_e6Vv">class MyTestProvider implements Partial<Provider> { // implement the relevant resolver resolveBooleanEvaluation(): ResolutionDetails<boolean> { return { value: true, variant: 'my-variant', reason: 'MY_REASON', }; } } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> <div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-background-color:#282c34;--prism-color:#ffffff"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="background-color:#282c34;color:#ffffff"><code class="codeBlockLines_e6Vv">// use your custom testing provider <OpenFeatureTestProvider provider={new MyTestProvider()}> <MyComponent /> </OpenFeatureTestProvider>, </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="faq-and-troubleshooting">FAQ and troubleshooting<a href="#faq-and-troubleshooting" class="hash-link" aria-label="Direct link to FAQ and troubleshooting" title="Direct link to FAQ and troubleshooting"></a></h2> <blockquote> I get an error that says something like: <code>A React component suspended while rendering, but no fallback UI was specified.</code> </blockquote> The OpenFeature React SDK features built-in <a href="#suspense-support">suspense support</a>. This means that it will render your loading fallback automatically while your provider starts up and during context reconciliation for any of your components using feature flags! If you use suspense and neglect to create a suspense boundary around any components using feature flags, you will see this error. Add a suspense boundary to resolve this issue. Alternatively, you can disable this suspense (the default) by removing <code>suspendWhileReconciling=true</code>, <code>suspendUntilReady=true</code> or <code>suspend=true</code> in the <a href="#evaluation-hooks">evaluation hooks</a> or the <a href="#openfeatureprovider-context-provider">OpenFeatureProvider</a> (which applies to all evaluation hooks in child components). <blockquote> I get odd rendering issues or errors when components mount if I use the suspense features. </blockquote> In React 16/17's "Legacy Suspense", when a component suspends, its sibling components initially mount and then are hidden. This can cause surprising effects and inconsistencies if sibling components are rendered while the provider is still getting ready. To fix this, you can upgrade to React 18, which uses "Concurrent Suspense", in which siblings are not mounted until their suspended sibling resolves. Alternatively, if you cannot upgrade to React 18, you can use the <code>useWhenProviderReady</code> utility hook in any sibling components to prevent them from mounting until the provider is ready. <blockquote> I am using multiple <code>OpenFeatureProvider</code> contexts, but they share the same provider or evaluation context. Why? </blockquote> The <code>OpenFeatureProvider</code> binds a <code>client</code> to all child components, but the provider and context associated with that client is controlled by the <code>domain</code> parameter. This is consistent with all OpenFeature SDKs. To scope an OpenFeatureProvider to a particular provider/context, set the <code>domain</code> parameter on your <code>OpenFeatureProvider</code>: <div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-background-color:#282c34;--prism-color:#ffffff"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="background-color:#282c34;color:#ffffff"><code class="codeBlockLines_e6Vv"><OpenFeatureProvider domain={'my-domain'}> <Page></Page> </OpenFeatureProvider> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> <blockquote> I can import things form the <code>@openfeature/react-sdk</code>, <code>@openfeature/web-sdk</code>, and <code>@openfeature/core</code>; which should I use? </blockquote> The <code>@openfeature/react-sdk</code> re-exports everything from its peers (<code>@openfeature/web-sdk</code> and <code>@openfeature/core</code>) and adds the React-specific features. You can import everything from the <code>@openfeature/react-sdk</code> directly. Avoid importing anything from <code>@openfeature/web-sdk</code> or <code>@openfeature/core</code>. <h2 class="anchor anchorWithStickyNavbar_LWe7" id="resources">Resources<a href="#resources" class="hash-link" aria-label="Direct link to Resources" title="Direct link to Resources"></a></h2> <ul> <li><a href="https://github.com/open-feature/react-test-app" target="_blank" rel="noopener noreferrer">Example repo</a></li> </ul></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col"><a href="https://github.com/open-feature/openfeature.dev/edit/main/docs/reference/technologies/client/web/react.mdx" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_Z9Sw" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/docs/reference/technologies/client/web/angular"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Angular</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/docs/reference/contributing"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Contributing</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#overview" class="table-of-contents__link toc-highlight">Overview</a></li><li><a href="#quick-start" class="table-of-contents__link toc-highlight">Quick start</a><ul><li><a href="#requirements" class="table-of-contents__link toc-highlight">Requirements</a></li><li><a href="#install" class="table-of-contents__link toc-highlight">Install</a></li><li><a href="#usage" class="table-of-contents__link toc-highlight">Usage</a></li><li><a href="#testing" class="table-of-contents__link toc-highlight">Testing</a></li></ul></li><li><a href="#faq-and-troubleshooting" class="table-of-contents__link toc-highlight">FAQ and troubleshooting</a></li><li><a href="#resources" class="table-of-contents__link toc-highlight">Resources</a></li></ul></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Sections</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/docs/reference/intro">Docs</a></li><li class="footer__item"><a class="footer__link-item" href="/specification">Specification</a></li><li class="footer__item"><a class="footer__link-item" href="/community">Community</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/tutorials/five-minutes-to-feature-flags">Tutorials</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://bsky.app/profile/openfeature.dev" target="_blank" rel="noopener noreferrer" class="footer__link-item">BlueSky<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://twitter.com/openfeature" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://www.linkedin.com/company/openfeature/" target="_blank" rel="noopener noreferrer" class="footer__link-item">LinkedIn<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://cloud-native.slack.com/archives/C0344AANLA1" target="_blank" rel="noopener noreferrer" class="footer__link-item">Join us on Slack<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://www.youtube.com/@openfeature" target="_blank" rel="noopener noreferrer" class="footer__link-item">YouTube<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/open-feature" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://www.linuxfoundation.org/legal/trademark-usage" target="_blank" rel="noopener noreferrer" class="footer__link-item">Trademarks<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"> <a href="https://www.netlify.com" target="_blank" rel="noreferrer noopener" aria-label="Deploys by Netlify"> <img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" width="114" height="51"> </a> </li></ul></div></div><div class="footer__bottom text--center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-1.81 -3.06 419.38 80.13" style="width:300px"><style>.st0{fill:#fff}</style><g id="XMLID_1_"><g id="XMLID_575_"><path id="XMLID_643_" d="M102.2 33c3.3 0 5.9-1.3 8-3.9l4.3 4.4c-3.4 3.8-7.3 5.7-11.9 5.7s-8.3-1.4-11.3-4.3-4.4-6.5-4.4-10.9 1.5-8.1 4.5-11 6.7-4.4 11.1-4.4c4.9 0 9 1.9 12.2 5.6l-4.1 4.7q-3.15-3.9-7.8-3.9c-2.5 0-4.6.8-6.4 2.4s-2.7 3.8-2.7 6.6.8 5 2.5 6.7c1.6 1.4 3.6 2.3 6 2.3" class="st0"></path><path id="XMLID_641_" d="M119.7 38.8V9.1h6.6v23.8H139v5.9z" class="st0"></path><path id="XMLID_638_" d="M168 34.7c-3 2.9-6.7 4.4-11.1 4.4s-8.1-1.5-11.1-4.4-4.5-6.6-4.5-10.9c0-4.4 1.5-8 4.5-10.9s6.7-4.4 11.1-4.4S165 10 168 12.9s4.5 6.6 4.5 10.9c0 4.4-1.5 8-4.5 10.9m-2.3-10.9c0-2.6-.9-4.9-2.6-6.8s-3.8-2.8-6.3-2.8-4.6.9-6.3 2.8-2.6 4.1-2.6 6.8c0 2.6.9 4.9 2.6 6.8s3.8 2.8 6.3 2.8 4.6-.9 6.3-2.8c1.8-1.9 2.6-4.1 2.6-6.8" class="st0"></path><path id="XMLID_636_" d="M186 31.2q1.65 2.1 4.5 2.1c2.85 0 3.4-.7 4.4-2.1 1.1-1.4 1.6-3.3 1.6-5.6V9.2h6.6v16.6q0 6.45-3.6 9.9c-3.6 3.45-5.4 3.5-9.1 3.5s-6.8-1.2-9.2-3.5q-3.6-3.45-3.6-9.9V9.2h6.6v16.4c.1 2.3.7 4.2 1.8 5.6" class="st0"></path><path id="XMLID_633_" d="M232.7 13c2.8 2.6 4.3 6.2 4.3 10.8s-1.4 8.3-4.1 11c-2.8 2.7-7 4-12.6 4H210V9.1h10.5c5.3 0 9.4 1.3 12.2 3.9m-4.8 17.7c1.6-1.5 2.4-3.8 2.4-6.7s-.8-5.2-2.4-6.7q-2.4-2.4-7.5-2.4h-3.7V33h4.2c3 0 5.3-.8 7-2.3" class="st0"></path><path id="XMLID_631_" d="M274.7 9.1h6.6v29.7h-6.6l-14.2-18.6v18.6h-6.6V9.1h6.2l14.6 19.1z" class="st0"></path><path id="XMLID_628_" d="m309.8 38.8-2.8-6.4h-12.5l-2.8 6.4h-7.1l12.8-29.7h6.4l12.8 29.7zM300.9 18l-3.7 8.6h7.4z" class="st0"></path><path id="XMLID_626_" d="M330.8 14.9v24h-6.6v-24h-8.4V9.2h23.5v5.7z" class="st0"></path><path id="XMLID_624_" d="M344 9.1h6.6v29.7H344z" class="st0"></path><path id="XMLID_622_" d="m368.9 28 7.6-18.9h7.2l-11.9 29.7h-5.6L354.3 9.1h7.2z" class="st0"></path><path id="XMLID_620_" d="M408.6 9.1V15h-14.8v6.1h13.3v5.7h-13.3V33h15.3v5.9h-21.9V9.2h21.4z" class="st0"></path><path id="XMLID_618_" d="M94.6 64.1c1.8 0 3.3-.7 4.5-2.2l2.4 2.5c-1.9 2.1-4.1 3.2-6.7 3.2s-4.7-.8-6.3-2.4c-1.7-1.6-2.5-3.7-2.5-6.1 0-2.5.8-4.5 2.5-6.2s3.8-2.5 6.2-2.5c2.7 0 5 1 6.9 3.1l-2.3 2.6c-1.2-1.5-2.6-2.2-4.4-2.2-1.4 0-2.6.5-3.6 1.4s-1.5 2.1-1.5 3.7.5 2.8 1.4 3.7c.9 1 2.1 1.4 3.4 1.4" class="st0"></path><path id="XMLID_615_" d="M118 65.1c-1.7 1.6-3.8 2.5-6.2 2.5-2.5 0-4.5-.8-6.2-2.5-1.7-1.6-2.5-3.7-2.5-6.1s.8-4.5 2.5-6.1 3.8-2.5 6.2-2.5c2.5 0 4.5.8 6.2 2.5 1.7 1.6 2.5 3.7 2.5 6.1s-.8 4.5-2.5 6.1m-1.2-6.1c0-1.5-.5-2.8-1.4-3.8-1-1-2.1-1.6-3.5-1.6s-2.6.5-3.5 1.6c-1 1-1.4 2.3-1.4 3.8s.5 2.7 1.4 3.8c1 1 2.1 1.6 3.5 1.6s2.6-.5 3.5-1.6c.9-1 1.4-2.3 1.4-3.8" class="st0"></path><path id="XMLID_613_" d="m138.6 56.9-4.5 9.1h-2.2l-4.5-9.1v10.5h-3.7V50.7h5l4.3 9.1 4.3-9.1h5v16.7h-3.7z" class="st0"></path><path id="XMLID_610_" d="M157.9 52.3c1.2 1 1.8 2.5 1.8 4.6s-.6 3.6-1.8 4.5c-1.2 1-3 1.4-5.5 1.4h-2.2v4.6h-3.7V50.7h5.9c2.5.1 4.3.6 5.5 1.6m-2.7 6.5c.4-.5.7-1.2.7-2.2s-.3-1.6-.9-2-1.5-.6-2.7-.6h-2.1v5.6h2.5c1.2 0 2-.3 2.5-.8" class="st0"></path><path id="XMLID_608_" d="M167 63.1c.6.8 1.5 1.2 2.5 1.2s1.9-.4 2.5-1.2.9-1.8.9-3.2v-9.2h3.7V60c0 2.4-.7 4.3-2 5.6s-3 1.9-5.1 1.9-3.8-.7-5.1-2-2-3.2-2-5.6v-9.3h3.7v9.2q0 2.25.9 3.3" class="st0"></path><path id="XMLID_606_" d="M187.5 54v13.4h-3.7V54h-4.7v-3.2h13.2V54z" class="st0"></path><path id="XMLID_604_" d="M195 50.8h3.7v16.7H195z" class="st0"></path><path id="XMLID_602_" d="M214.4 50.8h3.7v16.7h-3.7l-7.9-10.4v10.4h-3.7V50.8h3.5l8.2 10.7V50.8z" class="st0"></path><path id="XMLID_600_" d="M233.1 59h3.7v5.9c-1.7 1.8-3.9 2.8-6.9 2.8-2.4 0-4.5-.8-6.2-2.4s-2.5-3.7-2.5-6.1c0-2.5.8-4.5 2.5-6.2s3.7-2.5 6.1-2.5 4.5.8 6.2 2.4l-1.9 2.8c-.7-.7-1.4-1.1-2.1-1.3-.6-.2-1.3-.4-2-.4-1.4 0-2.6.5-3.6 1.4-1 1-1.5 2.2-1.5 3.8s.5 2.8 1.4 3.8c.9.9 2 1.4 3.3 1.4s2.4-.2 3.2-.7V59z" class="st0"></path><path id="XMLID_598_" d="M257.8 50.8v3.3h-7.7v3.6h7.3V61h-7.3v6.5h-3.7V50.8z" class="st0"></path><path id="XMLID_595_" d="M275 65.1c-1.7 1.6-3.8 2.5-6.2 2.5-2.5 0-4.5-.8-6.2-2.5-1.7-1.6-2.5-3.7-2.5-6.1s.8-4.5 2.5-6.1 3.8-2.5 6.2-2.5c2.5 0 4.5.8 6.2 2.5 1.7 1.6 2.5 3.7 2.5 6.1s-.8 4.5-2.5 6.1m-1.3-6.1c0-1.5-.5-2.8-1.4-3.8-1-1-2.1-1.6-3.5-1.6s-2.6.5-3.5 1.6c-1 1-1.4 2.3-1.4 3.8s.5 2.7 1.4 3.8c1 1 2.1 1.6 3.5 1.6s2.6-.5 3.5-1.6c1-1 1.4-2.3 1.4-3.8" class="st0"></path><path id="XMLID_593_" d="M285.1 63.1c.6.8 1.5 1.2 2.5 1.2s1.9-.4 2.5-1.2.9-1.8.9-3.2v-9.2h3.7V60c0 2.4-.7 4.3-2 5.6s-3 1.9-5.1 1.9-3.8-.7-5.1-2-2-3.2-2-5.6v-9.3h3.7v9.2c-.1 1.5.3 2.6.9 3.3" class="st0"></path><path id="XMLID_591_" d="M310.2 50.8h3.7v16.7h-3.7l-7.9-10.4v10.4h-3.7V50.8h3.5l8.2 10.7V50.8z" class="st0"></path><path id="XMLID_588_" d="M330.7 53c1.6 1.5 2.4 3.5 2.4 6.1s-.8 4.6-2.3 6.1-3.9 2.3-7.1 2.3H318V50.8h5.9c3 0 5.3.7 6.8 2.2m-2.7 9.9c.9-.9 1.4-2.1 1.4-3.7s-.5-2.9-1.4-3.8-2.3-1.3-4.2-1.3h-2.1v10.1h2.4c1.7-.1 3-.5 3.9-1.3" class="st0"></path><path id="XMLID_585_" d="m347.7 67.4-1.5-3.6h-7l-1.5 3.6h-4l7.2-16.7h3.6l7.2 16.7zm-5-11.7-2.1 4.8h4.2z" class="st0"></path><path id="XMLID_583_" d="M359.5 54v13.4h-3.7V54H351v-3.2h13.2V54z" class="st0"></path><path id="XMLID_581_" d="M366.9 50.8h3.7v16.7h-3.7z" class="st0"></path><path id="XMLID_578_" d="M388.7 65.1c-1.7 1.6-3.8 2.5-6.2 2.5-2.5 0-4.5-.8-6.2-2.5-1.7-1.6-2.5-3.7-2.5-6.1s.8-4.5 2.5-6.1 3.8-2.5 6.2-2.5c2.5 0 4.5.8 6.2 2.5 1.7 1.6 2.5 3.7 2.5 6.1s-.8 4.5-2.5 6.1m-1.2-6.1c0-1.5-.5-2.8-1.4-3.8-1-1-2.1-1.6-3.5-1.6s-2.6.5-3.5 1.6c-1 1-1.4 2.3-1.4 3.8s.5 2.7 1.4 3.8c1 1 2.1 1.6 3.5 1.6s2.6-.5 3.5-1.6c.9-1 1.4-2.3 1.4-3.8" class="st0"></path><path id="XMLID_576_" d="M406 50.8h3.7v16.7H406l-7.9-10.4v10.4h-3.7V50.8h3.5l8.2 10.7z" class="st0"></path></g></g><g id="XMLID_197_"><g id="XMLID_392_"><path id="XMLID_397_" d="M15.5 47.7H6.4v21.4h21.3v-9.2H15.5z" class="st0"></path><path id="XMLID_395_" d="M61.3 47.8v12.1H49.1v-.1 9.3h21.3V47.7h-9.2z" class="st0"></path><path id="XMLID_394_" d="M6.4 26.4h9.2l-.1-.1V14.2h12.2V5H6.4z" class="st0"></path><path id="XMLID_393_" d="M49.1 5v9.2h12.2v12.2h9.1V5z" class="st0"></path></g><g id="XMLID_200_" opacity="0.8"><path id="XMLID_391_" d="M47.9 26.4 35.7 14.2h13.4V5H27.7v9.2l12.2 12.2z" class="st0"></path><path id="XMLID_390_" d="M36.9 47.7h-8L39 57.8l2 2.1H27.7v9.2h21.4v-9.3l-6.1-6z" class="st0"></path><path id="XMLID_389_" d="M61.3 26.4v13.3l-2.1-2.1-10.1-10.1v8.1l6 6 6.1 6.1h9.2V26.4z" class="st0"></path><path id="XMLID_388_" d="M27.7 38.5 15.6 26.4H6.4v21.3h9.1V34.4l12.2 12.2z" class="st0"></path></g></g></svg><div class="footer__copyright">© 2025 OpenFeature is a Cloud Native Computing Foundation incubating project | Documentation Distributed under CC BY 4.0 | All Rights Reserved</div></div></div></footer></div> </body> </html>