release 0.3.0

Author: goenning

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.3.0
+
+- Added a new `AptabaseProvider` and `useAptabase` hook to make usage easier
+
 ## 0.2.2
 
 - Fix bundled file names

README.md

@@ -16,21 +16,45 @@ npm add @aptabase/react-native
 
 First, you need to get your `App Key` from Aptabase, you can find it in the `Instructions` menu on the left side menu.
 
-Initialize the SDK as early as possible, ideally before declaring the `App` component:
+Initialize the SDK by using the `AptabaseProvider` on your `App` component:
 
 ```js
-import { init } from "@aptabase/react-native";
-
-init("<YOUR_APP_KEY>"); // 👈 this is where you enter your App Key
+export default function App() {
+  return (
+    <AptabaseProvider appKey="<YOUR_APP_KEY>">
+      <Counter />
+    </AptabaseProvider>
+  );
+}
 ```
 
-Afterwards, you can start tracking events with `trackEvent`:
+Afterwards, you can start tracking events with `trackEvent` from `useAptabase` hook:
 
 ```js
-import { trackEvent } from "@aptabase/react-native";
-
-trackEvent("app_started"); // An event with no properties
-trackEvent("screen_view", { name: "Settings" }); // An event with a custom property
+import { useAptabase } from "@aptabase/react-native";
+
+export function Counter() {
+  const { trackEvent } = useAptabase();
+  const [count, setCount] = useState(0);
+
+  const increment = () => {
+    setCount(count + 1);
+    trackEvent("increment", { count });
+  };
+
+  const decrement = () => {
+    setCount(count - 1);
+    trackEvent("decrement", { count });
+  };
+
+  return (
+    <View>
+      <Button onPress={increment} title="Increment" />
+      <Button onPress={decrement} title="Decrement" />
+      <Text>Count is {count}</Text>
+    </View>
+  );
+}
 ```
 
 **Note for Expo apps:** Events sent during development while running on Expo Go will not have the `App Version` property because native modules are not available in Expo Go. However, when you build your app and run it on a real device, the `App Version` property will be available. Alternatively, you can also set the `appVersion` during the `init` call so that it's available during development as well.
@@ -46,4 +70,3 @@ A few important notes:
 ## Preparing for Submission to Apple App Store
 
 When submitting your app to the Apple App Store, you'll need to fill out the `App Privacy` form. You can find all the answers on our [How to fill out the Apple App Privacy when using Aptabase](https://aptabase.com/docs/apple-app-privacy) guide.
-

examples/HelloWorldExpo/App.js

@@ -1,21 +1,17 @@
 import { StatusBar } from "expo-status-bar";
-import { Button, StyleSheet, Text, View } from "react-native";
-import { init, trackEvent } from "@aptabase/react-native";
-
-init("A-DEV-0000000000");
-trackEvent("app_started");
+import { StyleSheet, Text, View } from "react-native";
+import { AptabaseProvider } from "@aptabase/react-native";
+import { Counter } from "./Counter";
 
 export default function App() {
-  const onClick = () => {
-    trackEvent("Hello");
-  };
-
   return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-      <Button onPress={onClick} title="Click Me" color="#841584" />
-      <StatusBar style="auto" />
-    </View>
+    <AptabaseProvider appKey="A-US-0928558097">
+      <View style={styles.container}>
+        <Text>Open up App.js to start working on your app!</Text>
+        <Counter />
+        <StatusBar style="auto" />
+      </View>
+    </AptabaseProvider>
   );
 }
 

examples/HelloWorldExpo/Counter.js

@@ -0,0 +1,26 @@
+import { useState } from "react";
+import { Button, Text, View } from "react-native";
+import { useAptabase } from "@aptabase/react-native";
+
+export function Counter() {
+  const { trackEvent } = useAptabase();
+  const [count, setCount] = useState(0);
+
+  const increment = () => {
+    trackEvent("increment");
+    setCount(count + 1);
+  };
+
+  const decrement = () => {
+    trackEvent("decrement");
+    setCount(count - 1);
+  };
+
+  return (
+    <View>
+      <Button onPress={increment} title="Increment" />
+      <Button onPress={decrement} title="Decrement" />
+      <Text>Count is {count}</Text>
+    </View>
+  );
+}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@aptabase/react-native",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "private": false,
   "description": "React Native SDK for Aptabase: Open Source, Privacy-First and Simple Analytics for Mobile, Desktop and Web Apps",
   "sideEffects": false,
@@ -39,6 +39,7 @@
   ],
   "devDependencies": {
     "@vitest/coverage-v8": "0.34.3",
+    "@types/react": "18.2.22",
     "@types/node": "20.5.9",
     "tsup": "7.2.0",
     "vite": "4.4.9",

package.json

@@ -0,0 +1,31 @@
+import { init, trackEvent } from "./track";
+import { createContext, useEffect, type ReactNode } from "react";
+import { AptabaseOptions } from "./types";
+
+type ContextProps = {};
+
+export type AptabaseClient = {
+  trackEvent: typeof trackEvent;
+};
+
+const AptabaseContext = createContext<ContextProps>({});
+
+type Props = {
+  appKey: string;
+  options?: AptabaseOptions;
+  children: ReactNode;
+};
+
+export function AptabaseProvider({ appKey, options, children }: Props) {
+  useEffect(() => {
+    init(appKey, options);
+  }, [appKey, options]);
+
+  return (
+    <AptabaseContext.Provider value={{}}>{children}</AptabaseContext.Provider>
+  );
+}
+
+export function useAptabase(): AptabaseClient {
+  return { trackEvent };
+}

src/context.tsx

@@ -1,57 +1,3 @@
-import type { AptabaseOptions } from "./types";
-import { getEnvironmentInfo } from "./env";
-import { AppState, Platform } from "react-native";
-import { AptabaseClient } from "./client";
-import { FLUSH_INTERVAL } from "./constants";
-import { validate } from "./validate";
-
-export type { AptabaseOptions };
-
-let _client: AptabaseClient | undefined;
-
-/**
- * Initializes the SDK with given App Key
- * @param {string} appKey - Aptabase App Key
- * @param {AptabaseOptions} options - Optional initialization parameters
- */
-export function init(appKey: string, options?: AptabaseOptions) {
-  const [ok, msg] = validate(Platform.OS, appKey, options);
-  if (!ok) {
-    console.warn(`Aptabase: ${msg}. Tracking will be disabled.`);
-    return;
-  }
-
-  const env = getEnvironmentInfo();
-  _client = new AptabaseClient(appKey, env, options);
-
-  const flushInterval = options?.flushInterval ?? FLUSH_INTERVAL;
-  _client.startPolling(flushInterval);
-
-  if (!AppState.isAvailable) return;
-
-  AppState.addEventListener("change", (next) => {
-    _client?.stopPolling();
-
-    switch (next) {
-      case "active":
-        _client?.startPolling(flushInterval);
-        break;
-
-      case "background":
-        _client?.flush();
-        break;
-    }
-  });
-}
-
-/**
- * Track an event using given properties
- * @param {string} eventName - The name of the event to track
- * @param {Object} props - Optional custom properties
- */
-export function trackEvent(
-  eventName: string,
-  props?: Record<string, string | number | boolean>
-) {
-  _client?.trackEvent(eventName, props);
-}
+export type { AptabaseOptions } from "./types";
+export { AptabaseProvider, useAptabase } from "./context";
+export { init, trackEvent } from "./track";

src/index.ts

@@ -0,0 +1,55 @@
+import type { AptabaseOptions } from "./types";
+import { getEnvironmentInfo } from "./env";
+import { AppState, Platform } from "react-native";
+import { AptabaseClient } from "./client";
+import { FLUSH_INTERVAL } from "./constants";
+import { validate } from "./validate";
+
+let _client: AptabaseClient | undefined;
+
+/**
+ * Initializes the SDK with given App Key
+ * @param {string} appKey - Aptabase App Key
+ * @param {AptabaseOptions} options - Optional initialization parameters
+ */
+export function init(appKey: string, options?: AptabaseOptions) {
+  const [ok, msg] = validate(Platform.OS, appKey, options);
+  if (!ok) {
+    console.warn(`Aptabase: ${msg}. Tracking will be disabled.`);
+    return;
+  }
+
+  const env = getEnvironmentInfo();
+  _client = new AptabaseClient(appKey, env, options);
+
+  const flushInterval = options?.flushInterval ?? FLUSH_INTERVAL;
+  _client.startPolling(flushInterval);
+
+  if (!AppState.isAvailable) return;
+
+  AppState.addEventListener("change", (next) => {
+    _client?.stopPolling();
+
+    switch (next) {
+      case "active":
+        _client?.startPolling(flushInterval);
+        break;
+
+      case "background":
+        _client?.flush();
+        break;
+    }
+  });
+}
+
+/**
+ * Track an event using given properties
+ * @param {string} eventName - The name of the event to track
+ * @param {Object} props - Optional custom properties
+ */
+export function trackEvent(
+  eventName: string,
+  props?: Record<string, string | number | boolean>
+) {
+  _client?.trackEvent(eventName, props);
+}

src/track.ts

@@ -6,7 +6,7 @@
     "importHelpers": true,
     "outDir": "dist",
     "strict": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "allowJs": true,
     "sourceMap": true,
     "resolveJsonModule": true,
@@ -20,5 +20,5 @@
     },
     "lib": ["esnext", "dom"]
   },
-  "include": ["src/index.ts"]
+  "include": ["src/*.ts", "src/*.tsx"]
 }