chore: update to use react sdk (#3480)

* chore: update to use react sdk

Signed-off-by: Mark Phelps <[email protected]>

* chore: update react lib version

Signed-off-by: Mark Phelps <[email protected]>

---------

Signed-off-by: Mark Phelps <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

examples/nextjs/README.md

@@ -4,10 +4,10 @@ This is an example of how to use Flipt with a NextJS application.
 
 **Note:** This example is not meant to be used in production, it is only meant to demonstrate how to use Flipt with NextJS.
 
-It uses both the [Flipt Node SDK](https://github.com/flipt-io/flipt-client-sdks/tree/main/flipt-client-node) and [Flipt Browser SDK](https://github.com/flipt-io/flipt-client-sdks/tree/main/flipt-client-browser) to evalute feature flags from the Flipt API in two different ways:
+It uses both the [Flipt Node SDK](https://github.com/flipt-io/flipt-client-sdks/tree/main/flipt-client-node) and [Flipt React SDK](https://github.com/flipt-io/flipt-client-sdks/tree/main/flipt-client-react) to evalute feature flags from the Flipt API in two different ways:
 
-1. Using the [`getServerSideProps`](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props) function to evaluate the flags on the server side before rendering the page 
-1. Using the Flipt Browser SDK to evaluate the flags in the browser/client side
+1. Using the [`getServerSideProps`](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props) function to evaluate the flags on the server side before rendering the page
+1. Using the Flipt React SDK to evaluate the flags in the browser/client side
 
 We also included [some code](./pages/api/hello.ts) showing how you could use Flipt with [NextJS API routes](https://nextjs.org/docs/api-routes/introduction), but we are not hitting the API it in this example.
 
@@ -21,7 +21,7 @@ Both examples are using the same Flipt flag and are evaluating the flag within t
 
 ### Client Side
 
-For the client-side example, we are using the [Flipt Browser SDK](https://github.com/flipt-io/flipt-client-sdks/tree/main/flipt-client-browser) to evaluate the flag in the browser/client side. The `FliptEvaluationClient` object pulls flag state from the Flipt server and performs evaluation client-side in the browser to evalute the `language` flag.
+For the client-side example, we are using the [Flipt React SDK](https://github.com/flipt-io/flipt-client-sdks/tree/main/flipt-client-react) to evaluate the flag in the browser/client side. The `FliptEvaluationClient` object pulls flag state from the Flipt server and performs evaluation client-side in the browser to evalute the `language` flag.
 
 ### Server Side
 
@@ -31,8 +31,8 @@ For the server-side example, we are using the [`getServerSideProps`](https://nex
 
 To run this example application you'll need:
 
-* [Docker](https://docs.docker.com/install/)
-* [docker-compose](https://docs.docker.com/compose/install/)
+- [Docker](https://docs.docker.com/install/)
+- [docker-compose](https://docs.docker.com/compose/install/)
 
 ## Running the Example
 

examples/nextjs/components/Greeting.tsx

@@ -1,21 +1,19 @@
 import { useState, useEffect } from "react";
 import { v4 as uuidv4 } from "uuid";
-import { FliptEvaluationClient } from "@flipt-io/flipt-client-browser";
+import { useFliptContext } from "@flipt-io/flipt-client-react";
 
 export default function Greeting() {
   const [data, setData] = useState<any | null>(null);
 
+  const { client } = useFliptContext();
+
   useEffect(() => {
     async function fetchData() {
       try {
-        const client = await FliptEvaluationClient.init("default", {
-          url: process.env.NEXT_PUBLIC_FLIPT_ADDR ?? "http://localhost:8080",
-        });
-
-        const result = client.evaluateVariant("language", uuidv4(), {});
-        console.log(result);
+        const evaluation = client?.evaluateVariant("language", uuidv4(), {});
+        console.log(evaluation);
 
-        let language = result.variantKey;
+        let language = evaluation?.variantKey;
 
         const greeting =
           language == "es"

examples/nextjs/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@flipt-io/flipt-client": "^0.10.0",
-    "@flipt-io/flipt-client-browser": "^0.2.0",
+    "@flipt-io/flipt-client-react": "^0.0.1",
     "@next/font": "13.0.7",
     "@types/node": "18.11.17",
     "@types/react": "18.0.26",

examples/nextjs/pages/_app.tsx

@@ -1,6 +1,16 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import { FliptProvider } from "@flipt-io/flipt-client-react";
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    <FliptProvider
+      namespace="default"
+      options={{
+        url: process.env.NEXT_PUBLIC_FLIPT_ADDR ?? "http://localhost:8080",
+      }}
+    >
+      <Component {...pageProps} />
+    </FliptProvider>
+  );
 }

examples/nextjs/pages/_document.tsx

@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }

examples/nextjs/pages/api/hello.ts

@@ -13,7 +13,7 @@ type Data = {
 
 export default async function handler(
   _req: NextApiRequest,
-  res: NextApiResponse<Data>
+  res: NextApiResponse<Data>,
 ) {
   let language = "english";
   try {

examples/nextjs/postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};