+
-
React example app
-
{titleFlag}
-
- {badgeClass &&
{userType.toString()}}
-
- {JSON.stringify(OpenFeature.getContext(), null, 2)}
-
-
- >);
+
+
Openfeature React example app
+
+
+
+ Title comming from the feature flag:
+
{titleFlag}
+
+
+
+
+ Evaluation context used:
+
+
+ {JSON.stringify(OpenFeature.getContext(), null, 2)}
+
+
+ >
+ );
}
export default App;
diff --git a/examples/openfeature_react/react-app/src/components/account-selector.tsx b/examples/openfeature_react/react-app/src/components/account-selector.tsx
new file mode 100644
index 00000000000..635c8bd6a05
--- /dev/null
+++ b/examples/openfeature_react/react-app/src/components/account-selector.tsx
@@ -0,0 +1,18 @@
+import {existingUsers} from "../service/login.tsx";
+
+export const AccountSelector = ({onChange}: { onChange: (name: string) => void }) => {
+ return
+
+
+}
\ No newline at end of file
diff --git a/examples/openfeature_react/react-app/src/components/badges.tsx b/examples/openfeature_react/react-app/src/components/badges.tsx
new file mode 100644
index 00000000000..4251dabfa02
--- /dev/null
+++ b/examples/openfeature_react/react-app/src/components/badges.tsx
@@ -0,0 +1,10 @@
+import {OpenFeature, useFlag} from "@openfeature/react-sdk";
+
+export const Badges = () => {
+ const {value: badgeClass} = useFlag("badge-class", "");
+ const userType = OpenFeature.getContext().userType ?? "" as string;
+
+ return
+ {badgeClass && {userType.toString()}}
+
+}
\ No newline at end of file
diff --git a/examples/openfeature_react/react-app/src/index.css b/examples/openfeature_react/react-app/src/index.css
index 0b1b8e5f56e..58596733cdd 100644
--- a/examples/openfeature_react/react-app/src/index.css
+++ b/examples/openfeature_react/react-app/src/index.css
@@ -1,104 +1,9 @@
-:root {
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
- font-weight: 400;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
-body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
+@layer base {
+ html {
+ @apply bg-zinc-800;
+ }
}
-
-pre {
- text-align: left ;
- background-color: #1a1a1a;
- padding: 1rem;
-}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
-}
-
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
-}
-
-.badge-red {
- background-color: #dc3545;
- color: white;
- padding: 3px 6px;
- text-align: center;
- border-radius: 5px;
- font-size: 0.8rem;
- font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-
-.badge-green {
- background-color: #198754;
- color: white;
- padding: 3px 6px;
- text-align: center;
- border-radius: 5px;
- font-size: 0.8rem;
- font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-
-.badge-blue {
- background-color: #0d6efd;
- color: white;
- padding: 3px 6px;
- text-align: center;
- border-radius: 5px;
- font-size: 0.8rem;
- font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
\ No newline at end of file
diff --git a/examples/openfeature_react/react-app/src/main.tsx b/examples/openfeature_react/react-app/src/main.tsx
index 3d7150da80e..d704bf538e4 100644
--- a/examples/openfeature_react/react-app/src/main.tsx
+++ b/examples/openfeature_react/react-app/src/main.tsx
@@ -5,6 +5,6 @@ import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
-
+
,
)
diff --git a/examples/openfeature_react/react-app/src/service/login.tsx b/examples/openfeature_react/react-app/src/service/login.tsx
new file mode 100644
index 00000000000..32c3684bbdd
--- /dev/null
+++ b/examples/openfeature_react/react-app/src/service/login.tsx
@@ -0,0 +1,32 @@
+import {EvaluationContext} from "@openfeature/react-sdk";
+
+export const existingUsers: [{ name: string, ctx: EvaluationContext }] = [
+ {
+ name: "Anonymous",
+ ctx: {targetingKey: "anonymous"}
+ },
+ {
+ name: "User 1",
+ ctx: {targetingKey: "user-1", userType: "dev", email: "john.doe@gofeatureflag.org"}
+ },
+ {
+ name: "User 2",
+ ctx: {targetingKey: "user-2", userType: "dev", email: "contact@gofeatureflag.org"}
+ },
+ {
+ name: "User 3",
+ ctx: {targetingKey: "user-3", userType: "admin", company: "GO Feature Flag"}
+ },
+ {
+ name: "User 4",
+ ctx: {targetingKey: "user-4", userType: "customer", location: "Paris"}
+ },
+ {
+ name: "User 5",
+ ctx: {targetingKey: "user-5"}
+ }
+]
+
+export const login = (userName: string): EvaluationContext => {
+ return existingUsers.find(user => user.name === userName)?.ctx ?? {targetingKey: "anonymous"}
+}
\ No newline at end of file
diff --git a/examples/openfeature_react/react-app/tailwind.config.js b/examples/openfeature_react/react-app/tailwind.config.js
new file mode 100644
index 00000000000..89a305e0280
--- /dev/null
+++ b/examples/openfeature_react/react-app/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: [
+ "./index.html",
+ "./src/**/*.{js,ts,jsx,tsx}",
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}
\ No newline at end of file