{"id":19157979,"url":"https://github.com/knagurski/ff-sdk-demo","last_synced_at":"2026-07-11T12:31:32.083Z","repository":{"id":204904359,"uuid":"712559205","full_name":"knagurski/ff-sdk-demo","owner":"knagurski","description":"Demo of using the FF SDK both within an app and a library","archived":false,"fork":false,"pushed_at":"2024-02-06T10:53:15.000Z","size":168,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-22T22:15:37.685Z","etag":null,"topics":["feature-flags","harness","sdk-react"],"latest_commit_sha":null,"homepage":"https://by-ff-sdk-demo.netlify.app/","language":"TypeScript","has_issues":false,"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/knagurski.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}},"created_at":"2023-10-31T17:53:46.000Z","updated_at":"2023-11-01T17:33:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"e20d39b3-d374-419d-98be-0e4b3cb1d45e","html_url":"https://github.com/knagurski/ff-sdk-demo","commit_stats":null,"previous_names":["knagurski/ff-sdk-demo"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/knagurski/ff-sdk-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knagurski%2Fff-sdk-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knagurski%2Fff-sdk-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knagurski%2Fff-sdk-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knagurski%2Fff-sdk-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/knagurski","download_url":"https://codeload.github.com/knagurski/ff-sdk-demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knagurski%2Fff-sdk-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35362871,"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-11T02:00:05.354Z","response_time":104,"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":["feature-flags","harness","sdk-react"],"created_at":"2024-11-09T08:42:35.775Z","updated_at":"2026-07-11T12:31:32.060Z","avatar_url":"https://github.com/knagurski.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ff-sdk-demo\n\nDemo of using the FF SDK both within an app and a library.\n\n\u003e Please note, this is rough demo code. There are warnings and some issues, but the general approach should work.\n\n## Getting started\n\n1. clone the repo\n2. in the root of the repo run `npm i`\n3. when complete run `npm run dev`\n4. open the URL posted in the output\n\n## Toggling flags\n\nWhen you log into the sample Harness account, you'll have 2 projects\n\n- **BY Library** this controls the flags used within the library\n- **BY App** this controls the flags used within the app\n\nThe app is set up to stream changes, so toggling a flag in either of these projects should be reflected in the app\nwithin a second or two.\n\n## Approach\n\nThe sample code uses Turbo for quickly being able to spin up a monorepo with both the App and UI library. This is a\ngreat tool, but for this example, you can largely ignore it and look at `app/web` for the App and `packages/ui` for the\nUI library.\n\nBecause of the way React handles context resolution, if both the App and UI library's use of the `FFContextProvider`\nwere in the same tree, any use of the context by either the App or the UI library would access the closest FF context up\nthe tree. One possible solution is to instead make the `FFContextProvider` usages siblings and use one to feed internal\nstate that can then be accessed by either the App or the UI library. In this example, I chose to hold the UI library's\nflags in state.\n\nThe UI library itself does not use the FF SDK directly, but rather has its own context provider and hook and flags are\ninjected into that context by the parent app. You can see this super-simple context and hook approach\nin `packages/ui/UIFF.tsx` and it's usage in a component in `packages/ui/card.tsx`.\n\nIn the App, you can see the injecting mechanism in `apps/web/src/App.tsx`. A benefit of this approach is that when unit\ntesting your UI library, you do not need to mock anything, but rather just wrap your component in a `FFUIProvider`\ncomponent with the flag state you want to test.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknagurski%2Fff-sdk-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fknagurski%2Fff-sdk-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknagurski%2Fff-sdk-demo/lists"}