### Why This Approach?

- Ensures SDK is initialized once
- Prevents unnecessary re-instantiation
- Works across all components without redundant setup
- Keeps state and session persistent


#### 1. Create a Context Provider


    import { createContext, useContext, useMemo } from "react";
    import ProductInsightsSDK from "rssb-product-insights";

    const SDKContext = createContext<ProductInsightsSDK | null>(null);

    export const SDKProvider = ({ children }) => {
    const sdk = useMemo(() => new ProductInsightsSDK({
        host: "http://localhost:1337/api",
        apiKey: "YOUR_API_KEY",
        identifier: "phoneNumber", // anything that uniquely identifies the user
    }), []);

    return <SDKContext.Provider value={sdk}>{children}</SDKContext.Provider>;
    };
 


#### 2.  Create a Hook to Use the SDK

    export const useProductInsightsSDK = () => {
      const sdk = useContext(SDKContext);
      if (!sdk) throw new Error("useProductInsightsSDK must be used within SDKProvider");

      return {
        tutorials: sdk.tutorials,
        releases: sdk.releases,
        features: sdk.features,
        member: sdk.member,
      };
    };
 

#### 3. Use the Provider in _app.tsx


    import { SDKProvider } from "@/context/SDKContext";

    function MyApp({ Component, pageProps }) {
      return (
        <SDKProvider>
          <Component {...pageProps} />
        </SDKProvider>
      );
    }

    export default MyApp;


#### 4. Use the Hook in a Component

    const { member, tutorials, features } = useProductInsightsSDK();

    member.trackAcquisition("social_media");

    features.recordFeedback({
      featureDocumentId: "p5o2faxy0seofmauqia1zr0a",
      rating: 5,
      comment: "new one",
    });

    tutorials.getAll(); -> Promise [{ documentId: "ne6t0qs022sijo28obxvpf73", ...rest }]

    // This is a promise in the near future, we'll add framework friendly hooks that handles, but for the time being ✌🏽
    // Next iterations will come with custom query and mutations hooks
    // You could choose to wrap it with react-query

    import { useQuery } from "@tanstack/react-query";

    const fetchTutorials = async () => {
      return await tutorials.getAll(); // Returns a promise
    };

    const useTutorials = () => {
      return useQuery({
        queryKey: ["tutorials"],
        queryFn: fetchTutorials,
        staleTime: 1000 * 60 * 5, // Cache data for 5 minutes
      });
    };

    export default useTutorials;



    // Marks the tutorial as initialized when the user first views the entity,  
    // e.g., when a modal or CTA appears for the first time.  
    tutorials.initMetric("ne6t0qs022sijo28obxvpf73");

    // Marks the tutorial as canceled when the user opts out,  
    // such as closing the CTA or dismissing the modal without interaction.  
    tutorials.setHasCanceled("ne6t0qs022sijo28obxvpf73"); // User chose to cancel or close the CTA

    // Marks the tutorial as completed when the user actively engages,  
    // such as clicking through the tutorial or finishing the required steps. 
    tutorials.setHasCompleted("ne9z7enw9ueb9ztx51eybq04"); // User completed something