feat!: support react 19

.github/workflows/e2e.yml

@@ -6,12 +6,17 @@ on:
   workflow_call:
 
 jobs:
-  test:
+  e2e_tests:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     container:
       image: mcr.microsoft.com/playwright:v1.54.0-noble
       options: --user 1001
+
+    strategy:
+      fail-fast: true
+      matrix:
+        react-version: [18, 19]
 
     steps:
     - uses: actions/checkout@v4
@@ -30,18 +35,24 @@ jobs:
         echo "VITE_BUCKETEER_API_ENDPOINT=${{ secrets.E2E_API_ENDPOINT }}" >> example/.env
         echo "CI=true" >> example/.env
 
+    - name: Install React ${{ matrix.react-version }}
+      if: matrix.react-version == 19
+      run: |
+        cd example
+        ./install_react_19.sh
+        cd ..
+
     - name: Build
       run: |
         pnpm run build
         pnpm run example:build
 
     - name: Run E2e tests
-      run: |
-        pnpm exec playwright test
+      run: pnpm exec playwright test
 
     - uses: actions/upload-artifact@v4
       if: ${{ !cancelled() }}
       with:
-        name: playwright-report
+        name: playwright-report-react-${{ matrix.react-version }}
         path: playwright-report/
-        retention-days: 30
+        retention-days: 30

README.md

@@ -23,14 +23,16 @@ For documentation related to flags management in Bucketeer, refer to the [Bucket
 
 ```bash
 npm install @bucketeer/react-client-sdk
+npm install @bucketeer/js-client-sdk
 ```
 
+The `@bucketeer/js-client-sdk` is a peer dependency and must be installed separately.
+
 ### Requirements
 
 **React Version Support:**
-- ✅ **Supported:** React 18.2.0 - 18.3.x
+- ✅ **Supported:** React 18.2.0 and above
 - ⚠️ **May work:** React 18.0.0 - 18.1.x (not officially supported)
-- ❌ **Not supported:** React 19.0.0 and above
 
 > Make sure your `react`, `react-dom`, `@types/react`, and `@types/react-dom` versions all match.
 
@@ -136,7 +138,7 @@ function MyComponent() {
   // Feature flag with detailed evaluation information
   const featureDetails = useBooleanVariationDetails('advanced-feature', false);
   // Access client for advanced operations
-  const { client } = useContext(BucketeerContext);
+  const client = useBucketeerClient();
   const handleUpdateUser = () => {
     client.updateUserAttributes({
       plan: 'premium',
@@ -277,6 +279,22 @@ Returns a JSON/object feature flag value along with detailed evaluation informat
 
 **Note:** The generic type `T` must extend `BKTValue`.
 
+#### `useBucketeerClient()`
+
+Returns the initialized Bucketeer client instance.
+**Returns:** `BKTClient | null`
+
+```tsx
+import { useBucketeerClient } from '@bucketeer/react-client-sdk';
+const client = useBucketeerClient();
+```
+
+Without the hook `useBucketeerClient()`, you can still access the Bucketeer client using the JS SDK methods:
+```tsx
+import { getBKTClient } from '@bucketeer/react-client-sdk';
+const client = getBKTClient();
+```
+
 ## Re-exported Types
 
 The React SDK re-exports several types from the `bkt-js-client-sdk` for convenience. Examples include:
@@ -289,11 +307,6 @@ The React SDK re-exports several types from the `bkt-js-client-sdk` for convenie
 - `defineBKTConfig` - Helper to create configuration
 - `defineBKTUser` - Helper to create user objects
 
-Without the `BucketeerContext`, you can still access the Bucketeer client using the JS SDK methods:
-```tsx
-import { getBKTClient } from '@bucketeer/react-client-sdk';
-const client = getBKTClient();
-```
 
 For full JS API reference, see the [Bucketeer documentation website](https://docs.bucketeer.io/sdk/client-side/javascript).
 
@@ -360,7 +373,7 @@ pnpm example:start
 
 ## Dependencies
 
-This library uses the [bkt-js-client-sdk](https://www.npmjs.com/package/bkt-js-client-sdk) under the hood.
+This library uses the [@bucketeer/js-client-sdk](https://www.npmjs.com/package/@bucketeer/js-client-sdk) under the hood.
 
 ## License
 

example/install_react_18.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+echo "🔄 Updating React to version ^18.2.0 ..."
+
+# Update example package.json
+echo "📦 Updating example package.json, install React 18"
+pnpm add react@^18.2.0 react-dom@^18.2.0
+pnpm add -D @types/react@^18.2.0 @types/react-dom@^18.2.0
+
+echo "✅ React updated to version ^18.2.0!"

example/install_react_19.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+echo "🔄 Updating React to version ^19.2.0 ..."
+
+# Update example package.json
+echo "📦 Updating example package.json, install React 19"
+pnpm add react@^19.2.0 react-dom@^19.2.0
+pnpm add -D @types/react@^19.2.0 @types/react-dom@^19.2.0
+
+echo "✅ React updated to version ^19.2.0 !"

example/package.json

@@ -11,13 +11,13 @@
   },
   "dependencies": {
     "@bucketeer/react-client-sdk": "workspace:*",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
-    "@types/react": "18.2.0",
-    "@types/react-dom": "18.2.0",
+    "@types/react": "^18.3.26",
+    "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react": "^4.4.1",
     "eslint": "^9.25.0",
     "eslint-plugin-react-hooks": "^5.2.0",

example/src/components/BoolVariation.tsx

@@ -1,14 +1,13 @@
 import {
-  BucketeerContext,
   useBooleanVariation,
   useBooleanVariationDetails,
+  useBucketeerClient,
 } from '@bucketeer/react-client-sdk';
-import { useContext } from 'react';
 import { cellStyle, labelCellStyle, tableCenterStyle } from './baseStyle';
 import { FEATURE_ID_BOOLEAN } from '../constants';
 
 function BoolVariation() {
-  const { client } = useContext(BucketeerContext);
+  const client = useBucketeerClient();
   // boolean
   const evaluation = useBooleanVariation(FEATURE_ID_BOOLEAN, false);
   // BKTEvaluationDetails<boolean>

example/src/components/NumberDoubleVariation.tsx

@@ -1,15 +1,14 @@
 import {
-  BucketeerContext,
+  useBucketeerClient,
   useNumberVariation,
   useNumberVariationDetails,
 } from '@bucketeer/react-client-sdk';
 
 import { cellStyle, labelCellStyle, tableCenterStyle } from './baseStyle';
-import { useContext } from 'react';
 import { FEATURE_ID_DOUBLE } from '../constants';
 
 function NumberDoubleVariation() {
-  const { client } = useContext(BucketeerContext);
+  const client = useBucketeerClient();
   // number
   const evaluation = useNumberVariation(FEATURE_ID_DOUBLE, 0);
   // BKTEvaluationDetails<number>

example/src/components/NumberIntVariation.tsx

@@ -1,15 +1,14 @@
 import {
-  BucketeerContext,
+  useBucketeerClient,
   useNumberVariation,
   useNumberVariationDetails,
 } from '@bucketeer/react-client-sdk';
 
 import { cellStyle, labelCellStyle, tableCenterStyle } from './baseStyle';
-import { useContext } from 'react';
 import { FEATURE_ID_INT } from '../constants';
 
 function NumberIntVariation() {
-  const { client } = useContext(BucketeerContext);
+  const client = useBucketeerClient();
   // number
   const evaluation = useNumberVariation(FEATURE_ID_INT, 0);
   // BKTEvaluationDetails<number>

example/src/components/ObjectVariation.tsx

@@ -1,11 +1,10 @@
-import { BucketeerContext, useObjectVariation, useObjectVariationDetails } from '@bucketeer/react-client-sdk';
+import { useBucketeerClient, useObjectVariation, useObjectVariationDetails } from '@bucketeer/react-client-sdk';
 import { cellStyle, labelCellStyle, tableCenterStyle } from './baseStyle';
-import { useContext } from 'react';
 import { FEATURE_ID_JSON } from '../constants';
 
 
 function ObjectVariation() {
-  const { client } = useContext(BucketeerContext);
+  const client = useBucketeerClient();
   // object
   const evaluation = useObjectVariation(FEATURE_ID_JSON, { default: 'value' });
   // BKTEvaluationDetails<object>

example/src/components/StringVariation.tsx

@@ -1,14 +1,13 @@
 import {
-  BucketeerContext,
+  useBucketeerClient,
   useStringVariation,
   useStringVariationDetails,
 } from '@bucketeer/react-client-sdk';
 import { cellStyle, labelCellStyle, tableCenterStyle } from './baseStyle';
-import { useContext } from 'react';
 import { FEATURE_ID_STRING } from '../constants';
 
 function StringVariation() {
-  const { client } = useContext(BucketeerContext);
+  const client = useBucketeerClient();
   // string
   const evaluation = useStringVariation(FEATURE_ID_STRING, 'default');
   // BKTEvaluationDetails<string>

package.json

@@ -34,9 +34,7 @@
   ],
   "author": "Bucketeer Team",
   "license": "MIT",
-  "dependencies": {
-    "@bucketeer/js-client-sdk": "2.3.1"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@playwright/test": "^1.54.1",
     "@rollup/plugin-commonjs": "^25.0.8",
@@ -48,8 +46,8 @@
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^29.5.14",
     "@types/node": "22.13.14",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^8.34.0",
     "@typescript-eslint/parser": "^8.34.0",
     "eslint": "^8.57.1",
@@ -60,16 +58,17 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.5.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rollup": "^4.43.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup": "^4.53.0",
     "ts-jest": "^29.4.0",
     "tslib": "^2.8.1",
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "react": ">=18.0.0 || ^19.0.0",
-    "react-dom": ">=18.0.0 || ^19.0.0"
+    "react": ">=18.2.0 < 20.0.0",
+    "react-dom": ">=18.2.0 < 20.0.0",
+    "@bucketeer/js-client-sdk": ">=2.4.0 < 3.0.0"
   },
   "repository": {
     "type": "git",