@youversion/platform-react-hooks 0.4.2 → 0.4.4

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @youversion/platform-react-hooks@0.4.2 build /home/runner/work/platform-sdk-react/platform-sdk-react/packages/hooks
+> @youversion/platform-react-hooks@0.4.4 build /home/runner/work/platform-sdk-react/platform-sdk-react/packages/hooks
 > tsc -p tsconfig.build.json
 

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @youversion/platform-react-hooks
 
+## 0.4.4
+
+### Patch Changes
+
+- 8dee8f6: chore: allow setting apiHost from React code
+- Updated dependencies [8dee8f6]
+  - @youversion/platform-core@0.4.4
+
+## 0.4.3
+
+### Patch Changes
+
+- 7b652f7: chore(docs): update documentation and readmes, and env var usage
+- Updated dependencies [7b652f7]
+  - @youversion/platform-core@0.4.3
+
 ## 0.4.2
 
 ### Patch Changes

package/README.md

@@ -0,0 +1,138 @@
+![License](https://img.shields.io/badge/license-Apache%20License%202.0-blue)
+![React >= 19.0.0](https://img.shields.io/badge/React-%3E%3D%2019.0.0-61dafb?logo=react&logoColor=white)
+![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white)
+
+# @youversion/platform-react-hooks
+
+A comprehensive collection of React hooks for accessing the YouVersion Platform APIs. Build Bible-based applications with type-safe hooks that handle loading states, error handling, and data fetching automatically.
+
+## Overview
+
+`@youversion/platform-react-hooks` provides React hooks that wrap the [@youversion/platform-core](../core/README.md) SDK, offering a declarative way to access Bible data in your React applications. Features automatic loading and error state management, type-safe hooks with TypeScript support, and memoized data fetching.
+
+> **📚 Full Documentation:** [developers.youversion.com/sdks/react](https://developers.youversion.com/sdks/react)
+
+## Installation
+
+```bash
+pnpm add @youversion/platform-react-hooks
+```
+
+### Peer Dependencies
+
+Requires React 19.0.0 or higher:
+
+```bash
+pnpm install react@19.0.0
+```
+
+## When to Use This Package
+
+Use `@youversion/platform-react-hooks` when you need:
+- ✅ Building custom React components with Bible features
+- ✅ Declarative data fetching with automatic loading/error states
+- ✅ Control over component UI while using reusable hooks
+- ✅ Server-side rendering compatible hooks
+
+**Use other packages instead if:**
+- ❌ Need direct API access → Use [@youversion/platform-core](../core/README.md) for low-level client
+- ❌ Want ready-made UI → Use [@youversion/platform-react-ui](../ui/README.md) for production components
+
+## Related Packages
+
+- **[@youversion/platform-core](../core/README.md)** - Core TypeScript SDK for direct API access
+- **[@youversion/platform-react-ui](../ui/README.md)** - Pre-built React components
+
+## Setup
+
+All hooks require the `BibleSDKProvider` to be wrapped around your application:
+
+```tsx
+import { BibleSDKProvider } from '@youversion/platform-react-hooks';
+
+function App() {
+  return (
+    <BibleSDKProvider appKey="YOUR_APP_KEY">
+      {/* All hooks work here */}
+    </BibleSDKProvider>
+  );
+}
+```
+
+> **⚠️ Missing Provider Error:** If you use a hook without wrapping it in `BibleSDKProvider`, you'll get: `Error: useBibleClient must be used within a BibleSDKProvider`.
+
+## Quick Start
+
+```tsx
+import { BibleSDKProvider, useVersion, usePassage } from '@youversion/platform-react-hooks';
+
+function BibleVerse() {
+  const { version, loading: versionLoading } = useVersion(111);
+  const { passage, loading: passageLoading } = usePassage(111, 'JHN.3.16');
+
+  if (versionLoading || passageLoading) return <div>Loading...</div>;
+
+  return (
+    <div>
+      <h1>{passage?.human_reference}</h1>
+      <p>Version: {version?.abbreviation}</p>
+      <div dangerouslySetInnerHTML={{ __html: passage?.content || '' }} />
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <BibleSDKProvider appKey="YOUR_APP_KEY">
+      <BibleVerse />
+    </BibleSDKProvider>
+  );
+}
+```
+
+## Features
+
+- Fetch Bible versions, books, chapters, and verses
+- Get formatted passages with HTML or text output
+- Access Verse of the Day content
+- Navigate between chapters and verses
+- Query available languages and metadata
+- Automatic loading/error state management
+
+## Troubleshooting
+
+### Provider Not Found Error
+
+**Error:** `Error: useBibleClient must be used within a BibleSDKProvider`
+
+**Solution:** Ensure `BibleSDKProvider` wraps your component tree:
+
+```tsx
+// ✅ Correct
+function App() {
+  return (
+    <BibleSDKProvider appKey="YOUR_APP_KEY">
+      <MyComponent />
+    </BibleSDKProvider>
+  );
+}
+```
+
+### Invalid App Key Error
+
+**Solution:** Get your App Key from [platform.youversion.com](https://platform.youversion.com/) and verify it's passed correctly.
+
+## Development
+
+See [CONTRIBUTING.md](../../CONTRIBUTING.md) for development instructions.
+
+## License
+
+See [LICENSE](../../LICENSE)
+
+## Support
+
+- GitHub Issues: [Create an issue](https://github.com/youversion/platform-sdk-react/issues)
+- Platform Docs: [platform.youversion.com](https://platform.youversion.com/)
+- Core SDK: [@youversion/platform-core documentation](../core/README.md)
+- Monorepo: [YouVersion Platform SDK](../../README.md)

package/dist/context/BibleSDKContext.d.ts

@@ -1,5 +1,7 @@
 type BibleSDKContextData = {
-    appId: string;
+    appKey: string;
+    apiHost?: string;
+    installationId?: string;
 };
 export declare const BibleSDKContext: import("react").Context<BibleSDKContextData | null>;
 export {};

package/dist/context/BibleSDKContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BibleSDKContext.d.ts","sourceRoot":"","sources":["../../src/context/BibleSDKContext.tsx"],"names":[],"mappings":"AAIA,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,eAAe,qDAAkD,CAAC"}
+{"version":3,"file":"BibleSDKContext.d.ts","sourceRoot":"","sources":["../../src/context/BibleSDKContext.tsx"],"names":[],"mappings":"AAIA,KAAK,mBAAmB,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,eAAe,qDAAkD,CAAC"}

package/dist/context/BibleSDKContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"BibleSDKContext.js","sourceRoot":"","sources":["../../src/context/BibleSDKContext.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAMtC,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAA6B,IAAI,CAAC,CAAC"}
+{"version":3,"file":"BibleSDKContext.js","sourceRoot":"","sources":["../../src/context/BibleSDKContext.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAQtC,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAA6B,IAAI,CAAC,CAAC"}

package/dist/context/BibleSDKProvider.d.ts

@@ -1,8 +1,9 @@
 import type { PropsWithChildren, ReactNode } from 'react';
 type BibleSDKProviderProps = {
     children: ReactNode;
-    appId: string;
+    appKey: string;
+    apiHost?: string;
 };
-export declare function BibleSDKProvider({ appId, children, }: PropsWithChildren<BibleSDKProviderProps>): React.ReactElement;
+export declare function BibleSDKProvider({ appKey, apiHost, children, }: PropsWithChildren<BibleSDKProviderProps>): React.ReactElement;
 export {};
 //# sourceMappingURL=BibleSDKProvider.d.ts.map

package/dist/context/BibleSDKProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BibleSDKProvider.d.ts","sourceRoot":"","sources":["../../src/context/BibleSDKProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1D,KAAK,qBAAqB,GAAG;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,GACT,EAAE,iBAAiB,CAAC,qBAAqB,CAAC,GAAG,KAAK,CAAC,YAAY,CAE/D"}
+{"version":3,"file":"BibleSDKProvider.d.ts","sourceRoot":"","sources":["../../src/context/BibleSDKProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK1D,KAAK,qBAAqB,GAAG;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,OAA8B,EAC9B,QAAQ,GACT,EAAE,iBAAiB,CAAC,qBAAqB,CAAC,GAAG,KAAK,CAAC,YAAY,CAiB/D"}

package/dist/context/BibleSDKProvider.js

@@ -1,7 +1,18 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
 import { BibleSDKContext } from './BibleSDKContext';
-export function BibleSDKProvider({ appId, children, }) {
-    return _jsx(BibleSDKContext.Provider, { value: { appId }, children: children });
+import { YouVersionPlatformConfiguration } from '@youversion/platform-core';
+export function BibleSDKProvider({ appKey, apiHost = 'api.youversion.com', children, }) {
+    // Syncing appKey and apiHost to YouVersionPlatformConfiguration
+    // so that this can be in sync with any other code that uses
+    // the YouVersionPlatformConfiguration, of which a lot of our
+    // core package uses this configuration.
+    useEffect(() => {
+        YouVersionPlatformConfiguration.appKey = appKey;
+        YouVersionPlatformConfiguration.apiHost = apiHost;
+    }, [appKey, apiHost]);
+    // Installation ID gets set automatically by YouVersionPlatformConfiguration
+    return (_jsx(BibleSDKContext.Provider, { value: { appKey, apiHost, installationId: YouVersionPlatformConfiguration.installationId }, children: children }));
 }
 //# sourceMappingURL=BibleSDKProvider.js.map

package/dist/context/BibleSDKProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"BibleSDKProvider.js","sourceRoot":"","sources":["../../src/context/BibleSDKProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAOpD,MAAM,UAAU,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,GACiC;IACzC,OAAO,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,YAAG,QAAQ,GAA4B,CAAC;AAC3F,CAAC"}
+{"version":3,"file":"BibleSDKProvider.js","sourceRoot":"","sources":["../../src/context/BibleSDKProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAC;AAQ5E,MAAM,UAAU,gBAAgB,CAAC,EAC/B,MAAM,EACN,OAAO,GAAG,oBAAoB,EAC9B,QAAQ,GACiC;IACzC,gEAAgE;IAChE,4DAA4D;IAC5D,6DAA6D;IAC7D,wCAAwC;IACxC,SAAS,CAAC,GAAG,EAAE;QACb,+BAA+B,CAAC,MAAM,GAAG,MAAM,CAAC;QAChD,+BAA+B,CAAC,OAAO,GAAG,OAAO,CAAC;IACpD,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACtB,4EAA4E;IAC5E,OAAO,CACL,KAAC,eAAe,CAAC,QAAQ,IACvB,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,+BAA+B,CAAC,cAAc,EAAE,YAEzF,QAAQ,GACgB,CAC5B,CAAC;AACJ,CAAC"}

package/dist/useBibleClient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBibleClient.d.ts","sourceRoot":"","sources":["../src/useBibleClient.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAA8C,MAAM,2BAA2B,CAAC;AAEpG,wBAAgB,cAAc,IAAI,WAAW,CAe5C"}
+{"version":3,"file":"useBibleClient.d.ts","sourceRoot":"","sources":["../src/useBibleClient.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAa,MAAM,2BAA2B,CAAC;AAEnE,wBAAgB,cAAc,IAAI,WAAW,CAkB5C"}

package/dist/useBibleClient.js

@@ -1,17 +1,18 @@
 'use client';
 import { useContext, useMemo } from 'react';
 import { BibleSDKContext } from './context';
-import { BibleClient, ApiClient, YouVersionPlatformConfiguration } from '@youversion/platform-core';
+import { BibleClient, ApiClient } from '@youversion/platform-core';
 export function useBibleClient() {
     const context = useContext(BibleSDKContext);
     return useMemo(() => {
-        if (!context?.appId) {
+        if (!context?.appKey) {
             throw new Error('BibleSDK context not found. Make sure your component is wrapped with BibleSDKProvider and an API key is provided.');
         }
         return new BibleClient(new ApiClient({
-            appId: context.appId,
-            installationId: YouVersionPlatformConfiguration.installationId,
+            appKey: context.appKey,
+            apiHost: context.apiHost,
+            installationId: context.installationId,
         }));
-    }, [context?.appId]);
+    }, [context?.apiHost, context?.appKey, context?.installationId]);
 }
 //# sourceMappingURL=useBibleClient.js.map

package/dist/useBibleClient.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBibleClient.js","sourceRoot":"","sources":["../src/useBibleClient.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAC;AAEpG,MAAM,UAAU,cAAc;IAC5B,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAC5C,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;YACpB,MAAM,IAAI,KAAK,CACb,mHAAmH,CACpH,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,WAAW,CACpB,IAAI,SAAS,CAAC;YACZ,KAAK,EAAE,OAAO,CAAC,KAAK;YACpB,cAAc,EAAE,+BAA+B,CAAC,cAAc;SAC/D,CAAC,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;AACvB,CAAC"}
+{"version":3,"file":"useBibleClient.js","sourceRoot":"","sources":["../src/useBibleClient.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEnE,MAAM,UAAU,cAAc;IAC5B,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAE5C,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;YACrB,MAAM,IAAI,KAAK,CACb,mHAAmH,CACpH,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,WAAW,CACpB,IAAI,SAAS,CAAC;YACZ,MAAM,EAAE,OAAO,CAAC,MAAM;YACtB,OAAO,EAAE,OAAO,CAAC,OAAO;YACxB,cAAc,EAAE,OAAO,CAAC,cAAc;SACvC,CAAC,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC;AACnE,CAAC"}

package/dist/useHighlights.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHighlights.d.ts","sourceRoot":"","sources":["../src/useHighlights.ts"],"names":[],"mappings":"AAUA,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,EAC3B,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,2BAA2B,CAAC;AAEnC,wBAAgB,aAAa,CAC3B,OAAO,CAAC,EAAE,oBAAoB,EAC9B,UAAU,CAAC,EAAE,iBAAiB,GAC7B;IACD,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,eAAe,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/D,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,sBAAsB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/F,CAkDA"}
+{"version":3,"file":"useHighlights.d.ts","sourceRoot":"","sources":["../src/useHighlights.ts"],"names":[],"mappings":"AAMA,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,EAC3B,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,2BAA2B,CAAC;AAEnC,wBAAgB,aAAa,CAC3B,OAAO,CAAC,EAAE,oBAAoB,EAC9B,UAAU,CAAC,EAAE,iBAAiB,GAC7B;IACD,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,eAAe,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/D,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,sBAAsB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/F,CAmDA"}

package/dist/useHighlights.js

@@ -2,20 +2,21 @@
 import { useMemo, useCallback } from 'react';
 import { useContext } from 'react';
 import { BibleSDKContext } from './context';
-import { HighlightsClient, ApiClient, YouVersionPlatformConfiguration, } from '@youversion/platform-core';
+import { HighlightsClient, ApiClient } from '@youversion/platform-core';
 import { useApiData } from './useApiData';
 import {} from '@youversion/platform-core';
 export function useHighlights(options, apiOptions) {
     const context = useContext(BibleSDKContext);
     const highlightsClient = useMemo(() => {
-        if (!context?.appId) {
+        if (!context?.appKey) {
             throw new Error('BibleSDK context not found. Make sure your component is wrapped with BibleSDKProvider and an API key is provided.');
         }
         return new HighlightsClient(new ApiClient({
-            appId: context.appId,
-            installationId: YouVersionPlatformConfiguration.installationId,
+            appKey: context.appKey,
+            apiHost: context.apiHost,
+            installationId: context.installationId,
         }));
-    }, [context?.appId]);
+    }, [context?.apiHost, context?.appKey, context?.installationId]);
     const { data, loading, error, refetch } = useApiData(() => highlightsClient.getHighlights(options), [highlightsClient, options?.version_id, options?.passage_id], {
         enabled: apiOptions?.enabled !== false,
     });

package/dist/useHighlights.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHighlights.js","sourceRoot":"","sources":["../src/useHighlights.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EACL,gBAAgB,EAChB,SAAS,EACT,+BAA+B,GAChC,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,UAAU,EAA0B,MAAM,cAAc,CAAC;AAClE,OAAO,EAMN,MAAM,2BAA2B,CAAC;AAEnC,MAAM,UAAU,aAAa,CAC3B,OAA8B,EAC9B,UAA8B;IAS9B,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAE5C,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QACpC,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;YACpB,MAAM,IAAI,KAAK,CACb,mHAAmH,CACpH,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,gBAAgB,CACzB,IAAI,SAAS,CAAC;YACZ,KAAK,EAAE,OAAO,CAAC,KAAK;YACpB,cAAc,EAAE,+BAA+B,CAAC,cAAc;SAC/D,CAAC,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAErB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,UAAU,CAClD,GAAG,EAAE,CAAC,gBAAgB,CAAC,aAAa,CAAC,OAAO,CAAC,EAC7C,CAAC,gBAAgB,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,CAAC,EAC5D;QACE,OAAO,EAAE,UAAU,EAAE,OAAO,KAAK,KAAK;KACvC,CACF,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,KAAK,EAAE,IAAqB,EAAsB,EAAE;QAClD,MAAM,MAAM,GAAG,MAAM,gBAAgB,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;QAC5D,OAAO,EAAE,CAAC;QACV,OAAO,MAAM,CAAC;IAChB,CAAC,EACD,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAC5B,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,KAAK,EAAE,SAAiB,EAAE,aAAsC,EAAiB,EAAE;QACjF,MAAM,gBAAgB,CAAC,eAAe,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACjE,OAAO,EAAE,CAAC;IACZ,CAAC,EACD,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAC5B,CAAC;IAEF,OAAO;QACL,UAAU,EAAE,IAAI;QAChB,OAAO;QACP,KAAK;QACL,OAAO;QACP,eAAe;QACf,eAAe;KAChB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"useHighlights.js","sourceRoot":"","sources":["../src/useHighlights.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,UAAU,EAA0B,MAAM,cAAc,CAAC;AAClE,OAAO,EAMN,MAAM,2BAA2B,CAAC;AAEnC,MAAM,UAAU,aAAa,CAC3B,OAA8B,EAC9B,UAA8B;IAS9B,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAE5C,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QACpC,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;YACrB,MAAM,IAAI,KAAK,CACb,mHAAmH,CACpH,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,gBAAgB,CACzB,IAAI,SAAS,CAAC;YACZ,MAAM,EAAE,OAAO,CAAC,MAAM;YACtB,OAAO,EAAE,OAAO,CAAC,OAAO;YACxB,cAAc,EAAE,OAAO,CAAC,cAAc;SACvC,CAAC,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC;IAEjE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,UAAU,CAClD,GAAG,EAAE,CAAC,gBAAgB,CAAC,aAAa,CAAC,OAAO,CAAC,EAC7C,CAAC,gBAAgB,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,CAAC,EAC5D;QACE,OAAO,EAAE,UAAU,EAAE,OAAO,KAAK,KAAK;KACvC,CACF,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,KAAK,EAAE,IAAqB,EAAsB,EAAE;QAClD,MAAM,MAAM,GAAG,MAAM,gBAAgB,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;QAC5D,OAAO,EAAE,CAAC;QACV,OAAO,MAAM,CAAC;IAChB,CAAC,EACD,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAC5B,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,KAAK,EAAE,SAAiB,EAAE,aAAsC,EAAiB,EAAE;QACjF,MAAM,gBAAgB,CAAC,eAAe,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACjE,OAAO,EAAE,CAAC;IACZ,CAAC,EACD,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAC5B,CAAC;IAEF,OAAO;QACL,UAAU,EAAE,IAAI;QAChB,OAAO;QACP,KAAK;QACL,OAAO;QACP,eAAe;QACf,eAAe;KAChB,CAAC;AACJ,CAAC"}

package/dist/useLanguages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLanguages.d.ts","sourceRoot":"","sources":["../src/useLanguages.ts"],"names":[],"mappings":"AAUA,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,UAAU,EACf,KAAK,QAAQ,EACd,MAAM,2BAA2B,CAAC;AAEnC,wBAAgB,YAAY,CAC1B,OAAO,EAAE,mBAAmB,EAC5B,UAAU,CAAC,EAAE,iBAAiB,GAC7B;IACD,SAAS,EAAE,UAAU,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;IACvC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CA+BA"}
+{"version":3,"file":"useLanguages.d.ts","sourceRoot":"","sources":["../src/useLanguages.ts"],"names":[],"mappings":"AAMA,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,UAAU,EACf,KAAK,QAAQ,EACd,MAAM,2BAA2B,CAAC;AAEnC,wBAAgB,YAAY,CAC1B,OAAO,EAAE,mBAAmB,EAC5B,UAAU,CAAC,EAAE,iBAAiB,GAC7B;IACD,SAAS,EAAE,UAAU,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;IACvC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAgCA"}

package/dist/useLanguages.js

@@ -2,20 +2,21 @@
 import { useMemo } from 'react';
 import { useContext } from 'react';
 import { BibleSDKContext } from './context';
-import { LanguagesClient, ApiClient, YouVersionPlatformConfiguration, } from '@youversion/platform-core';
+import { LanguagesClient, ApiClient } from '@youversion/platform-core';
 import { useApiData } from './useApiData';
 import {} from '@youversion/platform-core';
 export function useLanguages(options, apiOptions) {
     const context = useContext(BibleSDKContext);
     const languagesClient = useMemo(() => {
-        if (!context?.appId) {
+        if (!context?.appKey) {
             throw new Error('BibleSDK context not found. Make sure your component is wrapped with BibleSDKProvider and an API key is provided.');
         }
         return new LanguagesClient(new ApiClient({
-            appId: context.appId,
-            installationId: YouVersionPlatformConfiguration.installationId,
+            appKey: context.appKey,
+            apiHost: context.apiHost,
+            installationId: context.installationId,
         }));
-    }, [context?.appId]);
+    }, [context?.apiHost, context?.appKey, context?.installationId]);
     const { data, loading, error, refetch } = useApiData(() => languagesClient.getLanguages(options), [languagesClient, options?.country, options?.page_size, options?.page_token], {
         enabled: apiOptions?.enabled !== false,
     });

package/dist/useLanguages.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLanguages.js","sourceRoot":"","sources":["../src/useLanguages.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EACL,eAAe,EACf,SAAS,EACT,+BAA+B,GAChC,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,UAAU,EAA0B,MAAM,cAAc,CAAC;AAClE,OAAO,EAIN,MAAM,2BAA2B,CAAC;AAEnC,MAAM,UAAU,YAAY,CAC1B,OAA4B,EAC5B,UAA8B;IAO9B,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAE5C,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;YACpB,MAAM,IAAI,KAAK,CACb,mHAAmH,CACpH,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,eAAe,CACxB,IAAI,SAAS,CAAC;YACZ,KAAK,EAAE,OAAO,CAAC,KAAK;YACpB,cAAc,EAAE,+BAA+B,CAAC,cAAc;SAC/D,CAAC,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAErB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,UAAU,CAClD,GAAG,EAAE,CAAC,eAAe,CAAC,YAAY,CAAC,OAAO,CAAC,EAC3C,CAAC,eAAe,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,CAAC,EAC5E;QACE,OAAO,EAAE,UAAU,EAAE,OAAO,KAAK,KAAK;KACvC,CACF,CAAC;IAEF,OAAO;QACL,SAAS,EAAE,IAAI;QACf,OAAO;QACP,KAAK;QACL,OAAO;KACR,CAAC;AACJ,CAAC"}
+{"version":3,"file":"useLanguages.js","sourceRoot":"","sources":["../src/useLanguages.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACvE,OAAO,EAAE,UAAU,EAA0B,MAAM,cAAc,CAAC;AAClE,OAAO,EAIN,MAAM,2BAA2B,CAAC;AAEnC,MAAM,UAAU,YAAY,CAC1B,OAA4B,EAC5B,UAA8B;IAO9B,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAE5C,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;YACrB,MAAM,IAAI,KAAK,CACb,mHAAmH,CACpH,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,eAAe,CACxB,IAAI,SAAS,CAAC;YACZ,MAAM,EAAE,OAAO,CAAC,MAAM;YACtB,OAAO,EAAE,OAAO,CAAC,OAAO;YACxB,cAAc,EAAE,OAAO,CAAC,cAAc;SACvC,CAAC,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC;IAEjE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,UAAU,CAClD,GAAG,EAAE,CAAC,eAAe,CAAC,YAAY,CAAC,OAAO,CAAC,EAC3C,CAAC,eAAe,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,CAAC,EAC5E;QACE,OAAO,EAAE,UAAU,EAAE,OAAO,KAAK,KAAK;KACvC,CACF,CAAC;IAEF,OAAO;QACL,SAAS,EAAE,IAAI;QACf,OAAO;QACP,KAAK;QACL,OAAO;KACR,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youversion/platform-react-hooks",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@youversion/platform-core": "0.4.2"
+    "@youversion/platform-core": "0.4.4"
   },
   "peerDependencies": {
     "react": ">=19.1.0 <20.0.0"

package/src/context/BibleSDKContext.tsx

@@ -3,7 +3,9 @@
 import { createContext } from 'react';
 
 type BibleSDKContextData = {
-  appId: string;
+  appKey: string;
+  apiHost?: string;
+  installationId?: string;
 };
 
 export const BibleSDKContext = createContext<BibleSDKContextData | null>(null);

package/src/context/BibleSDKProvider.tsx

@@ -1,16 +1,35 @@
 'use client';
 
 import type { PropsWithChildren, ReactNode } from 'react';
+import { useEffect } from 'react';
 import { BibleSDKContext } from './BibleSDKContext';
+import { YouVersionPlatformConfiguration } from '@youversion/platform-core';
 
 type BibleSDKProviderProps = {
   children: ReactNode;
-  appId: string;
+  appKey: string;
+  apiHost?: string;
 };
 
 export function BibleSDKProvider({
-  appId,
+  appKey,
+  apiHost = 'api.youversion.com',
   children,
 }: PropsWithChildren<BibleSDKProviderProps>): React.ReactElement {
-  return <BibleSDKContext.Provider value={{ appId }}>{children}</BibleSDKContext.Provider>;
+  // Syncing appKey and apiHost to YouVersionPlatformConfiguration
+  // so that this can be in sync with any other code that uses
+  // the YouVersionPlatformConfiguration, of which a lot of our
+  // core package uses this configuration.
+  useEffect(() => {
+    YouVersionPlatformConfiguration.appKey = appKey;
+    YouVersionPlatformConfiguration.apiHost = apiHost;
+  }, [appKey, apiHost]);
+  // Installation ID gets set automatically by YouVersionPlatformConfiguration
+  return (
+    <BibleSDKContext.Provider
+      value={{ appKey, apiHost, installationId: YouVersionPlatformConfiguration.installationId }}
+    >
+      {children}
+    </BibleSDKContext.Provider>
+  );
 }

package/src/useBibleClient.test.tsx

@@ -19,16 +19,11 @@ vi.mock('@youversion/platform-core', async () => {
         isApiClient: true,
       };
     }),
-    YouVersionPlatformConfiguration: {
-      get installationId() {
-        return 'auto-generated-uuid';
-      },
-    },
   };
 });
 
 describe('useBibleClient', () => {
-  const mockAppId = 'test-app-id';
+  const mockAppKey = 'test-app-key';
 
   beforeEach(() => {
     vi.clearAllMocks();
@@ -38,7 +33,7 @@ describe('useBibleClient', () => {
     const wrapper = ({ children }: { children: ReactNode }) => (
       <BibleSDKContext.Provider
         value={{
-          appId: mockAppId,
+          appKey: mockAppKey,
         }}
       >
         {children}
@@ -48,8 +43,7 @@ describe('useBibleClient', () => {
     const { result } = renderHook(() => useBibleClient(), { wrapper });
 
     expect(ApiClient).toHaveBeenCalledWith({
-      appId: mockAppId,
-      installationId: 'auto-generated-uuid',
+      appKey: mockAppKey,
     });
     expect(BibleClient).toHaveBeenCalledWith(expect.objectContaining({ isApiClient: true }));
     expect(result.current).toEqual(expect.objectContaining({ isBibleClient: true }));
@@ -61,11 +55,11 @@ describe('useBibleClient', () => {
     );
   });
 
-  it('should throw error when appId is missing', () => {
+  it('should throw error when appKey is missing', () => {
     const wrapper = ({ children }: { children: ReactNode }) => (
       <BibleSDKContext.Provider
         value={{
-          appId: '',
+          appKey: '',
         }}
       >
         {children}
@@ -81,7 +75,7 @@ describe('useBibleClient', () => {
     const wrapper = ({ children }: { children: ReactNode }) => (
       <BibleSDKContext.Provider
         value={{
-          appId: mockAppId,
+          appKey: mockAppKey,
         }}
       >
         {children}
@@ -98,13 +92,13 @@ describe('useBibleClient', () => {
     expect(BibleClient).toHaveBeenCalledTimes(1);
   });
 
-  it('should create new BibleClient when appId changes', () => {
-    let currentAppId = mockAppId;
+  it('should create new BibleClient when appKey changes', () => {
+    let currentAppKey = mockAppKey;
 
     const wrapper = ({ children }: { children: ReactNode }) => (
       <BibleSDKContext.Provider
         value={{
-          appId: currentAppId,
+          appKey: currentAppKey,
         }}
       >
         {children}
@@ -116,11 +110,10 @@ describe('useBibleClient', () => {
     const firstClient = result.current;
     expect(BibleClient).toHaveBeenCalledTimes(1);
     expect(ApiClient).toHaveBeenCalledWith({
-      appId: mockAppId,
-      installationId: 'auto-generated-uuid',
+      appKey: mockAppKey,
     });
 
-    currentAppId = 'new-app-id';
+    currentAppKey = 'new-app-key';
     rerender();
 
     const secondClient = result.current;
@@ -128,16 +121,15 @@ describe('useBibleClient', () => {
     expect(firstClient).not.toBe(secondClient);
 
     expect(ApiClient).toHaveBeenLastCalledWith({
-      appId: 'new-app-id',
-      installationId: 'auto-generated-uuid',
+      appKey: 'new-app-key',
     });
   });
 
-  it('should throw error when appId is null', () => {
+  it('should throw error when appKey is null', () => {
     const wrapper = ({ children }: { children: ReactNode }) => (
       <BibleSDKContext.Provider
         value={{
-          appId: null as unknown as string,
+          appKey: null as unknown as string,
         }}
       >
         {children}

package/src/useBibleClient.ts

@@ -2,21 +2,24 @@
 
 import { useContext, useMemo } from 'react';
 import { BibleSDKContext } from './context';
-import { BibleClient, ApiClient, YouVersionPlatformConfiguration } from '@youversion/platform-core';
+import { BibleClient, ApiClient } from '@youversion/platform-core';
 
 export function useBibleClient(): BibleClient {
   const context = useContext(BibleSDKContext);
+
   return useMemo(() => {
-    if (!context?.appId) {
+    if (!context?.appKey) {
       throw new Error(
         'BibleSDK context not found. Make sure your component is wrapped with BibleSDKProvider and an API key is provided.',
       );
     }
+
     return new BibleClient(
       new ApiClient({
-        appId: context.appId,
-        installationId: YouVersionPlatformConfiguration.installationId,
+        appKey: context.appKey,
+        apiHost: context.apiHost,
+        installationId: context.installationId,
       }),
     );
-  }, [context?.appId]);
+  }, [context?.apiHost, context?.appKey, context?.installationId]);
 }

package/src/useHighlights.test.tsx

@@ -22,16 +22,11 @@ vi.mock('@youversion/platform-core', async () => {
     ApiClient: vi.fn(function () {
       return { isApiClient: true };
     }),
-    YouVersionPlatformConfiguration: {
-      get installationId() {
-        return 'auto-generated-uuid';
-      },
-    },
   };
 });
 
 describe('useHighlights', () => {
-  const mockAppId = 'test-app-id';
+  const mockAppKey = 'test-app-key';
 
   const mockHighlights: Collection<Highlight> = {
     data: [
@@ -59,7 +54,7 @@ describe('useHighlights', () => {
   let mockCreateHighlight: Mock;
   let mockDeleteHighlight: Mock;
 
-  const createWrapper = (contextValue: { appId: string }) => {
+  const createWrapper = (contextValue: { appKey: string }) => {
     return ({ children }: { children: ReactNode }) => (
       <BibleSDKContext.Provider value={contextValue}>{children}</BibleSDKContext.Provider>
     );
@@ -94,9 +89,9 @@ describe('useHighlights', () => {
       );
     });
 
-    it('should throw error when appId is missing', () => {
+    it('should throw error when appKey is missing', () => {
       const wrapper = createWrapper({
-        appId: '',
+        appKey: '',
       });
 
       expect(() => renderHook(() => useHighlights(), { wrapper })).toThrow(
@@ -108,21 +103,20 @@ describe('useHighlights', () => {
   describe('client creation', () => {
     it('should create HighlightsClient with correct ApiClient config', () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       renderHook(() => useHighlights(), { wrapper });
 
       expect(ApiClient).toHaveBeenCalledWith({
-        appId: mockAppId,
-        installationId: 'auto-generated-uuid',
+        appKey: mockAppKey,
       });
       expect(HighlightsClient).toHaveBeenCalledWith(expect.objectContaining({ isApiClient: true }));
     });
 
     it('should memoize HighlightsClient instance', () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { rerender } = renderHook(() => useHighlights(), { wrapper });
@@ -134,12 +128,12 @@ describe('useHighlights', () => {
     });
 
     it('should create new HighlightsClient when context values change', () => {
-      let currentAppId = mockAppId;
+      let currentAppKey = mockAppKey;
 
       const wrapper = ({ children }: { children: ReactNode }) => (
         <BibleSDKContext.Provider
           value={{
-            appId: currentAppId,
+            appKey: currentAppKey,
           }}
         >
           {children}
@@ -150,7 +144,7 @@ describe('useHighlights', () => {
 
       expect(HighlightsClient).toHaveBeenCalledTimes(1);
 
-      currentAppId = 'new-app-id';
+      currentAppKey = 'new-app-key';
 
       rerender();
 
@@ -161,7 +155,7 @@ describe('useHighlights', () => {
   describe('fetching highlights', () => {
     it('should fetch highlights with no options', async () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result } = renderHook(() => useHighlights(), { wrapper });
@@ -179,7 +173,7 @@ describe('useHighlights', () => {
 
     it('should fetch highlights with version_id option', async () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result } = renderHook(() => useHighlights({ version_id: 111 }), { wrapper });
@@ -194,7 +188,7 @@ describe('useHighlights', () => {
 
     it('should fetch highlights with passage_id option', async () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result } = renderHook(() => useHighlights({ passage_id: 'MAT.1.1' }), { wrapper });
@@ -209,7 +203,7 @@ describe('useHighlights', () => {
 
     it('should fetch highlights with both options', async () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result } = renderHook(
@@ -232,7 +226,7 @@ describe('useHighlights', () => {
 
     it('should refetch when options change', async () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result, rerender } = renderHook(({ options }) => useHighlights(options), {
@@ -258,7 +252,7 @@ describe('useHighlights', () => {
 
     it('should not fetch when enabled is false', async () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result } = renderHook(() => useHighlights(undefined, { enabled: false }), {
@@ -278,7 +272,7 @@ describe('useHighlights', () => {
       mockGetHighlights.mockRejectedValueOnce(error);
 
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result } = renderHook(() => useHighlights(), { wrapper });
@@ -293,7 +287,7 @@ describe('useHighlights', () => {
 
     it('should support manual refetch', async () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result } = renderHook(() => useHighlights(), { wrapper });
@@ -315,7 +309,7 @@ describe('useHighlights', () => {
   describe('createHighlight mutation', () => {
     it('should create highlight and refetch', async () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result } = renderHook(() => useHighlights(), { wrapper });
@@ -350,7 +344,7 @@ describe('useHighlights', () => {
       mockCreateHighlight.mockRejectedValueOnce(error);
 
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result } = renderHook(() => useHighlights(), { wrapper });
@@ -377,7 +371,7 @@ describe('useHighlights', () => {
   describe('deleteHighlight mutation', () => {
     it('should delete highlight and refetch', async () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result } = renderHook(() => useHighlights(), { wrapper });
@@ -402,7 +396,7 @@ describe('useHighlights', () => {
 
     it('should delete highlight with options', async () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result } = renderHook(() => useHighlights(), { wrapper });
@@ -428,7 +422,7 @@ describe('useHighlights', () => {
       mockDeleteHighlight.mockRejectedValueOnce(error);
 
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result } = renderHook(() => useHighlights(), { wrapper });

package/src/useHighlights.ts

@@ -3,11 +3,7 @@
 import { useMemo, useCallback } from 'react';
 import { useContext } from 'react';
 import { BibleSDKContext } from './context';
-import {
-  HighlightsClient,
-  ApiClient,
-  YouVersionPlatformConfiguration,
-} from '@youversion/platform-core';
+import { HighlightsClient, ApiClient } from '@youversion/platform-core';
 import { useApiData, type UseApiDataOptions } from './useApiData';
 import {
   type GetHighlightsOptions,
@@ -31,18 +27,19 @@ export function useHighlights(
   const context = useContext(BibleSDKContext);
 
   const highlightsClient = useMemo(() => {
-    if (!context?.appId) {
+    if (!context?.appKey) {
       throw new Error(
         'BibleSDK context not found. Make sure your component is wrapped with BibleSDKProvider and an API key is provided.',
       );
     }
     return new HighlightsClient(
       new ApiClient({
-        appId: context.appId,
-        installationId: YouVersionPlatformConfiguration.installationId,
+        appKey: context.appKey,
+        apiHost: context.apiHost,
+        installationId: context.installationId,
       }),
     );
-  }, [context?.appId]);
+  }, [context?.apiHost, context?.appKey, context?.installationId]);
 
   const { data, loading, error, refetch } = useApiData<Collection<Highlight>>(
     () => highlightsClient.getHighlights(options),

package/src/useLanguages.test.tsx

@@ -22,16 +22,11 @@ vi.mock('@youversion/platform-core', async () => {
     ApiClient: vi.fn(function () {
       return { isApiClient: true };
     }),
-    YouVersionPlatformConfiguration: {
-      get installationId() {
-        return 'auto-generated-uuid';
-      },
-    },
   };
 });
 
 describe('useLanguages', () => {
-  const mockAppId = 'test-app-id';
+  const mockAppKey = 'test-app-key';
 
   const mockLanguages: Collection<Language> = {
     data: [
@@ -77,7 +72,7 @@ describe('useLanguages', () => {
 
   let mockGetLanguages: Mock;
 
-  const createWrapper = (contextValue: { appId: string }) => {
+  const createWrapper = (contextValue: { appKey: string }) => {
     return ({ children }: { children: ReactNode }) => (
       <BibleSDKContext.Provider value={contextValue}>{children}</BibleSDKContext.Provider>
     );
@@ -108,9 +103,9 @@ describe('useLanguages', () => {
       );
     });
 
-    it('should throw error when appId is missing', () => {
+    it('should throw error when appKey is missing', () => {
       const wrapper = createWrapper({
-        appId: '',
+        appKey: '',
       });
 
       expect(() => renderHook(() => useLanguages({ country: 'US' }), { wrapper })).toThrow(
@@ -122,21 +117,20 @@ describe('useLanguages', () => {
   describe('client creation', () => {
     it('should create LanguagesClient with correct ApiClient config', () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       renderHook(() => useLanguages({ country: 'US' }), { wrapper });
 
       expect(ApiClient).toHaveBeenCalledWith({
-        appId: mockAppId,
-        installationId: 'auto-generated-uuid',
+        appKey: mockAppKey,
       });
       expect(LanguagesClient).toHaveBeenCalledWith(expect.objectContaining({ isApiClient: true }));
     });
 
     it('should memoize LanguagesClient instance', () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result, rerender } = renderHook(() => useLanguages({ country: 'US' }), { wrapper });
@@ -149,12 +143,12 @@ describe('useLanguages', () => {
     });
 
     it('should create new LanguagesClient when context values change', () => {
-      let currentAppId = mockAppId;
+      let currentAppKey = mockAppKey;
 
       const wrapper = ({ children }: { children: ReactNode }) => (
         <BibleSDKContext.Provider
           value={{
-            appId: currentAppId,
+            appKey: currentAppKey,
           }}
         >
           {children}
@@ -165,7 +159,7 @@ describe('useLanguages', () => {
 
       expect(LanguagesClient).toHaveBeenCalledTimes(1);
 
-      currentAppId = 'new-app-id';
+      currentAppKey = 'new-app-key';
       rerender();
 
       expect(LanguagesClient).toHaveBeenCalledTimes(2);
@@ -175,7 +169,7 @@ describe('useLanguages', () => {
   describe('fetching languages', () => {
     it('should fetch languages with required country', async () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result } = renderHook(() => useLanguages({ country: 'US' }), { wrapper });
@@ -193,7 +187,7 @@ describe('useLanguages', () => {
 
     it('should fetch languages with all options', async () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const options: GetLanguagesOptions = {
@@ -214,7 +208,7 @@ describe('useLanguages', () => {
 
     it('should refetch when options change', async () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result, rerender } = renderHook(({ options }) => useLanguages(options), {
@@ -240,7 +234,7 @@ describe('useLanguages', () => {
 
     it('should not fetch when enabled is false', async () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result } = renderHook(() => useLanguages({ country: 'US' }, { enabled: false }), {
@@ -260,7 +254,7 @@ describe('useLanguages', () => {
       mockGetLanguages.mockRejectedValueOnce(error);
 
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result } = renderHook(() => useLanguages({ country: 'US' }), { wrapper });
@@ -275,7 +269,7 @@ describe('useLanguages', () => {
 
     it('should support manual refetch', async () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result } = renderHook(() => useLanguages({ country: 'US' }), { wrapper });

package/src/useLanguages.ts

@@ -3,11 +3,7 @@
 import { useMemo } from 'react';
 import { useContext } from 'react';
 import { BibleSDKContext } from './context';
-import {
-  LanguagesClient,
-  ApiClient,
-  YouVersionPlatformConfiguration,
-} from '@youversion/platform-core';
+import { LanguagesClient, ApiClient } from '@youversion/platform-core';
 import { useApiData, type UseApiDataOptions } from './useApiData';
 import {
   type GetLanguagesOptions,
@@ -27,18 +23,19 @@ export function useLanguages(
   const context = useContext(BibleSDKContext);
 
   const languagesClient = useMemo(() => {
-    if (!context?.appId) {
+    if (!context?.appKey) {
       throw new Error(
         'BibleSDK context not found. Make sure your component is wrapped with BibleSDKProvider and an API key is provided.',
       );
     }
     return new LanguagesClient(
       new ApiClient({
-        appId: context.appId,
-        installationId: YouVersionPlatformConfiguration.installationId,
+        appKey: context.appKey,
+        apiHost: context.apiHost,
+        installationId: context.installationId,
       }),
     );
-  }, [context?.appId]);
+  }, [context?.apiHost, context?.appKey, context?.installationId]);
 
   const { data, loading, error, refetch } = useApiData<Collection<Language>>(
     () => languagesClient.getLanguages(options),

package/src/useVOTD.test.tsx

@@ -5,8 +5,6 @@ import { useVerseOfTheDay } from './useVOTD';
 import { BibleSDKContext } from './context';
 import { BibleClient, ApiClient, type VOTD } from '@youversion/platform-core';
 
-const MOCK_INSTALLATION_ID = 'auto-generated-uuid';
-
 // Mock the core package
 vi.mock('@youversion/platform-core', async () => {
   const actual = await vi.importActual('@youversion/platform-core');
@@ -18,16 +16,11 @@ vi.mock('@youversion/platform-core', async () => {
     ApiClient: vi.fn(function () {
       return { isApiClient: true };
     }),
-    YouVersionPlatformConfiguration: {
-      get installationId() {
-        return MOCK_INSTALLATION_ID;
-      },
-    },
   };
 });
 
 describe('useVerseOfTheDay', () => {
-  const mockAppId = 'test-app-id';
+  const mockAppKey = 'test-app-key';
 
   const mockVOTD: VOTD = {
     day: 1,
@@ -36,7 +29,7 @@ describe('useVerseOfTheDay', () => {
 
   let mockGetVOTD: Mock;
 
-  const createWrapper = (contextValue: { appId: string }) => {
+  const createWrapper = (contextValue: { appKey: string }) => {
     return ({ children }: { children: ReactNode }) => (
       <BibleSDKContext.Provider value={contextValue}>{children}</BibleSDKContext.Provider>
     );
@@ -67,9 +60,9 @@ describe('useVerseOfTheDay', () => {
       );
     });
 
-    it('should throw error when appId is missing', () => {
+    it('should throw error when appKey is missing', () => {
       const wrapper = createWrapper({
-        appId: '',
+        appKey: '',
       });
 
       expect(() => renderHook(() => useVerseOfTheDay(1), { wrapper })).toThrow(
@@ -81,21 +74,20 @@ describe('useVerseOfTheDay', () => {
   describe('client creation', () => {
     it('should create BibleClient with correct ApiClient config', () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       renderHook(() => useVerseOfTheDay(1), { wrapper });
 
       expect(ApiClient).toHaveBeenCalledWith({
-        appId: mockAppId,
-        installationId: MOCK_INSTALLATION_ID,
+        appKey: mockAppKey,
       });
       expect(BibleClient).toHaveBeenCalledWith(expect.objectContaining({ isApiClient: true }));
     });
 
     it('should memoize BibleClient instance', () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result, rerender } = renderHook(() => useVerseOfTheDay(1), { wrapper });
@@ -108,12 +100,12 @@ describe('useVerseOfTheDay', () => {
     });
 
     it('should create new BibleClient when context values change', () => {
-      let currentAppId = mockAppId;
+      let currentAppKey = mockAppKey;
 
       const wrapper = ({ children }: { children: ReactNode }) => (
         <BibleSDKContext.Provider
           value={{
-            appId: currentAppId,
+            appKey: currentAppKey,
           }}
         >
           {children}
@@ -124,7 +116,7 @@ describe('useVerseOfTheDay', () => {
 
       expect(BibleClient).toHaveBeenCalledTimes(1);
 
-      currentAppId = 'new-app-id';
+      currentAppKey = 'new-app-key';
       rerender();
 
       expect(BibleClient).toHaveBeenCalledTimes(2);
@@ -134,7 +126,7 @@ describe('useVerseOfTheDay', () => {
   describe('fetching VOTD', () => {
     it('should fetch VOTD for day 1', async () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result } = renderHook(() => useVerseOfTheDay(1), { wrapper });
@@ -155,7 +147,7 @@ describe('useVerseOfTheDay', () => {
       mockGetVOTD.mockResolvedValueOnce(mockVOTD100);
 
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result } = renderHook(() => useVerseOfTheDay(100), { wrapper });
@@ -173,7 +165,7 @@ describe('useVerseOfTheDay', () => {
       mockGetVOTD.mockResolvedValueOnce(mockVOTD366);
 
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result } = renderHook(() => useVerseOfTheDay(366), { wrapper });
@@ -188,7 +180,7 @@ describe('useVerseOfTheDay', () => {
 
     it('should refetch when day changes', async () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result, rerender } = renderHook(({ day }) => useVerseOfTheDay(day), {
@@ -215,7 +207,7 @@ describe('useVerseOfTheDay', () => {
 
     it('should not fetch when enabled is false', async () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result } = renderHook(() => useVerseOfTheDay(1, { enabled: false }), { wrapper });
@@ -233,7 +225,7 @@ describe('useVerseOfTheDay', () => {
       mockGetVOTD.mockRejectedValueOnce(error);
 
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result } = renderHook(() => useVerseOfTheDay(1), { wrapper });
@@ -248,7 +240,7 @@ describe('useVerseOfTheDay', () => {
 
     it('should support manual refetch', async () => {
       const wrapper = createWrapper({
-        appId: mockAppId,
+        appKey: mockAppKey,
       });
 
       const { result } = renderHook(() => useVerseOfTheDay(1), { wrapper });