Skip to content

Commit

Permalink
docs(example): Fixing link in react example
Browse files Browse the repository at this point in the history
Signed-off-by: Thomas Poignant <[email protected]>
  • Loading branch information
thomaspoignant committed Dec 6, 2024
1 parent 79bc9b9 commit b790403
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 16 deletions.
6 changes: 3 additions & 3 deletions examples/openfeature_react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ When ready, you can access to the application at http://localhost:3000/.
## What this example does?
It uses the Openfeature react SDK and the GO Feature Flag web provider.

The configuration of the server is in the `goff-proxy.yaml` file, and it loads the flag configuration from the `config.goff.yaml` file.
The configuration of the server is in the [`goff-proxy.yaml`](goff-proxy.yaml) file, and it loads the flag configuration from the [`config.goff.yaml`](config.goff.yaml) file.

You can look at the file [`react-app/src/App.tsx`](webapp/src/js/main.js) to look how we retrieve the flags, and we change the display of the page.
You can look at the file [`react-app/src/App.tsx`](react-app/src/App.tsx) to look how we retrieve the flags, and we change the display of the page.

At any moment during the demo you can edit the `config.goff.yaml` file and see how it changes the behaviors of the application.
At any moment during the demo you can edit the [`config.goff.yaml`](config.goff.yaml) file and see how it changes the behaviors of the application.
24 changes: 12 additions & 12 deletions examples/openfeature_react/react-app/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import "./App.css";
import { EvaluationContext, OpenFeature, OpenFeatureProvider, useFlag } from "@openfeature/react-sdk";
import { GoFeatureFlagWebProvider } from "@openfeature/go-feature-flag-web-provider";
import {EvaluationContext, OpenFeature, OpenFeatureProvider, useFlag} from "@openfeature/react-sdk";
import {GoFeatureFlagWebProvider} from "@openfeature/go-feature-flag-web-provider";

const goFeatureFlagWebProvider = new GoFeatureFlagWebProvider({
endpoint: "http://localhost:1031"
Expand All @@ -15,35 +15,35 @@ OpenFeature.setProvider(goFeatureFlagWebProvider);
function App() {
return (
<OpenFeatureProvider>
<Page />
<Page/>
</OpenFeatureProvider>
);
}

function Page() {
const { value: hideLogo } = useFlag("hide-logo", false);
const { value: titleFlag } = useFlag("title-flag", "GO Feature Flag");
const { value: badgeClass } = useFlag("badge-class", "");
const {value: hideLogo} = useFlag("hide-logo", false);
const {value: titleFlag} = useFlag("title-flag", "GO Feature Flag");
const {value: badgeClass} = useFlag("badge-class", "");

const setRandomEvaluationContext = () => {
const availableContexts: Array<EvaluationContext> = [
{ targetingKey: "user-2", userType: "dev", email: "[email protected]" },
{ targetingKey: "user-3", userType: "admin", company: "GO Feature Flag" },
{ targetingKey: "user-4", userType: "customer", location: "Paris" },
{ targetingKey: "user-5" }
{targetingKey: "user-2", userType: "dev", email: "[email protected]"},
{targetingKey: "user-3", userType: "admin", company: "GO Feature Flag"},
{targetingKey: "user-4", userType: "customer", location: "Paris"},
{targetingKey: "user-5"}

];
const randomIndex = Math.floor(Math.random() * availableContexts.length);
OpenFeature.setContext(availableContexts[randomIndex]);
};

const userType =OpenFeature.getContext().userType ?? "anonymous" as string;
const userType = OpenFeature.getContext().userType ?? "anonymous" as string;

return (
<>
<div>
<a href="https://gofeatureflag.org" target="_blank">
{!hideLogo && <img src="/public/logo.png" className="logo" alt="GO Feature Flag logo" />}
{!hideLogo && <img src="/public/logo.png" className="logo" alt="GO Feature Flag logo"/>}
</a>
</div>
<h2>React example app</h2>
Expand Down
2 changes: 1 addition & 1 deletion examples/openfeature_react/react-app/src/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,6 @@ import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
<App/>
</React.StrictMode>,
)

0 comments on commit b790403

Please sign in to comment.