From 036074febd19b1a4f174849e47f9b5cf82fce654 Mon Sep 17 00:00:00 2001
From: Daniel Loomb <daniel@statsig.com>
Date: Fri, 8 Mar 2024 12:34:29 -0800
Subject: [PATCH] feat: add react init sample

---
 .../sample-precomp-bootstrap.tsx              | 18 ++++++++---
 .../sample-react-precomp-initialize.tsx       | 31 +++++++++++++++++++
 2 files changed, 44 insertions(+), 5 deletions(-)
 create mode 100644 samples/react/src/samples/react-precomp/sample-react-precomp-initialize.tsx

diff --git a/samples/react/src/samples/precomputed-client/sample-precomp-bootstrap.tsx b/samples/react/src/samples/precomputed-client/sample-precomp-bootstrap.tsx
index 4fd5f786..3130bc78 100644
--- a/samples/react/src/samples/precomputed-client/sample-precomp-bootstrap.tsx
+++ b/samples/react/src/samples/precomputed-client/sample-precomp-bootstrap.tsx
@@ -1,8 +1,11 @@
 /* eslint-disable no-console */
 import { DJB2 } from '@statsig/client-core';
-import { EvaluationsDataAdapter } from '@statsig/precomputed-evaluations';
+import {
+  EvaluationsDataAdapter,
+  PrecomputedEvaluationsClient,
+} from '@statsig/precomputed-evaluations';
 
-import { myStatsigClient } from './sample-precomp-instance';
+import { STATSIG_CLIENT_KEY } from '../../Contants';
 
 // <snippet>
 // Returns a JSON string from a local file or Statsig Server SDK.
@@ -35,11 +38,16 @@ function getStatsigBootstrapJson(): string {
 
 // prettier-ignore
 export default async function Sample(): Promise<void> {
-const dataAdapter = new EvaluationsDataAdapter();
-
 // <snippet>
-
 const user = { userID: 'a-user' };
+// </snippet>
+
+const myStatsigClient = new PrecomputedEvaluationsClient(
+  STATSIG_CLIENT_KEY, 
+  user,
+);
+const dataAdapter = myStatsigClient.getDataAdapter() as EvaluationsDataAdapter;
+// <snippet>
 
 // Pass the bootstrap values to the data adapter
 dataAdapter.setDataForUser(user, getStatsigBootstrapJson());
diff --git a/samples/react/src/samples/react-precomp/sample-react-precomp-initialize.tsx b/samples/react/src/samples/react-precomp/sample-react-precomp-initialize.tsx
new file mode 100644
index 00000000..e530757b
--- /dev/null
+++ b/samples/react/src/samples/react-precomp/sample-react-precomp-initialize.tsx
@@ -0,0 +1,31 @@
+// <snippet>
+import { PrecomputedEvaluationsClient } from '@statsig/precomputed-evaluations';
+import { StatsigProvider, useGate } from '@statsig/react-bindings';
+
+// </snippet>
+import { STATSIG_CLIENT_KEY as YOUR_CLIENT_KEY } from '../../Contants';
+
+// prettier-ignore
+export default async function Sample(): Promise<void> {
+App();
+}
+
+// <snippet>
+const myStatsigClient = new PrecomputedEvaluationsClient(YOUR_CLIENT_KEY, {
+  userID: 'a-user',
+});
+
+function Content() {
+  const gate = useGate('a_gate');
+
+  return <div>a_gate: {gate.value ? 'Passing' : 'Failing'}</div>;
+}
+
+function App() {
+  return (
+    <StatsigProvider client={myStatsigClient}>
+      <Content />
+    </StatsigProvider>
+  );
+}
+// </snippet>