https://github.com/open-feature/react-test-app

Small test app for @openfeature/react-sdk development and e2e testing
https://github.com/open-feature/react-test-app

Last synced: 10 months ago
JSON representation

Small test app for @openfeature/react-sdk development and e2e testing

• Host: GitHub
• URL: https://github.com/open-feature/react-test-app
• Owner: open-feature
• License: apache-2.0
• Created: 2023-11-02T18:58:43.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-12-06T17:55:25.000Z (over 1 year ago)
• Last Synced: 2024-12-06T18:38:05.447Z (over 1 year ago)
• Language: TypeScript
• Homepage: https://openfeature.dev
• Size: 1.05 MB
• Stars: 3
• Watchers: 7
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Running the Demo App

* `npm install`

* `npm run start` ->  http://localhost:3000

# Demos

The `@openfeature/react-sdk` is built on the `@openfeature/web-sdk`, and adds additional react-specific APIs and features.

The evaluation API is exposed through the "useFlag" hooks. The hooks automatically re-render when flags change, and feature optional suspense-support while flags are not ready to be evaluated.

The demo application itself will walk you though the demos listed below.

## Suspense

Components depending on feature flags suspend until the provider is ready to evaluate them.

You can modify the "delay" query param to artificially delay the startup.

See the [code](./src/demos/SuspenseDemo.tsx).

## Flag Change

When the provider emits an event indicating flags have changed, components associated with that provider automatically re-render.

You can modify the "delay" query param to change the interval.

See the [code](./src/demos/FlagChangeDemo.tsx).

## Context Change

Components after the provider reconciles its state with a context change (usually associated with a user action).

If reconciliation is not instantaneous, the component suspends. You can modify the "delay" query param to change reconciliation delay.

See the [code](./src/demos/ContextChangeDemo.tsx).