{"id":51646523,"url":"https://github.com/toddbaert/flagd-react-demo","last_synced_at":"2026-07-13T23:30:43.338Z","repository":{"id":365558450,"uuid":"1272673113","full_name":"toddbaert/flagd-react-demo","owner":"toddbaert","description":null,"archived":false,"fork":false,"pushed_at":"2026-06-17T20:57:33.000Z","size":48,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-17T22:25:27.430Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/toddbaert.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-17T20:47:26.000Z","updated_at":"2026-06-17T20:58:06.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/toddbaert/flagd-react-demo","commit_stats":null,"previous_names":["toddbaert/flagd-react-demo"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/toddbaert/flagd-react-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toddbaert%2Fflagd-react-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toddbaert%2Fflagd-react-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toddbaert%2Fflagd-react-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toddbaert%2Fflagd-react-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/toddbaert","download_url":"https://codeload.github.com/toddbaert/flagd-react-demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toddbaert%2Fflagd-react-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35440511,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-13T02:00:06.543Z","response_time":119,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-07-13T23:30:42.715Z","updated_at":"2026-07-13T23:30:43.333Z","avatar_url":"https://github.com/toddbaert.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# flagd-react-demo\n\nTiny React + Vite demo evaluating flags from [flagd](https://flagd.dev) over\n[OFREP](https://openfeature.dev/specification/appendix-c) via the\n[OpenFeature React SDK](https://www.npmjs.com/package/@openfeature/react-sdk).\n\nVersions:\n- flagd `v0.16.0` (`ghcr.io/open-feature/flagd:v0.16.0`)\n- `@openfeature/react-sdk` `^1.4.0`\n- `@openfeature/web-sdk` `^1.9.0`\n- `@openfeature/ofrep-web-provider` `^0.4.1`\n\n## Run\n\n```bash\ndocker compose up    # flagd: OFREP on :8016, RPC on :8013\nnpm install\nnpm run dev          # http://localhost:5173\n```\n\n## What to try\n\nThe React SDK re-renders automatically on both flag and context changes:\n\n1. **Flag changes.** Edit `flags/demo.flagd.json`. flagd reloads the file; the\n   OFREP provider polls every 2s and re-evaluates. Try flipping\n   `welcome-message.defaultVariant`.\n\n2. **Context changes.** Use the \"Evaluation context\" form:\n   - `tier = premium` -\u003e `hex-color` swatch goes green (`TARGETING_MATCH`).\n   - Change `targetingKey` -\u003e `fib-algo` fractional bucketing picks a\n     different variant (deterministic 25/25/25/25 split).\n\n## Wiring\n\n`src/main.tsx`:\n\n```ts\nOpenFeature.setProvider(\n  new OFREPWebProvider({ baseUrl: \"http://localhost:8016\", pollInterval: 2_000 }),\n);\nOpenFeature.setContext({ targetingKey: \"user-1\", tier: \"free\" });\n```\n\n`src/App.tsx` just calls `useFlag(key, defaultValue)`; the SDK handles\nre-renders on `PROVIDER_CONFIGURATION_CHANGED` and context reconciliation.\n\n## Poking with curl\n\n```bash\ncurl -s -X POST http://localhost:8016/ofrep/v1/evaluate/flags \\\n  -H 'Content-Type: application/json' \\\n  -d '{\"context\":{\"targetingKey\":\"user-1\",\"tier\":\"premium\"}}' | jq\n```\n\nflagd also exposes RPC on `:8013` and metrics/probes on `:8014`.\n\n## Notes\n\n- `--cors-origin=*` is set so the browser can call OFREP from Vite. Scope this\n  to your real origin in production.\n- 2s polling is for snappy demos; production can rely on visibility refresh\n  (default) with a longer interval, or disable polling.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoddbaert%2Fflagd-react-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftoddbaert%2Fflagd-react-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoddbaert%2Fflagd-react-demo/lists"}