YouVersion Platform React SDK

A comprehensive React SDK for integrating YouVersion Platform features into your web applications. This monorepo provides a type-safe API client, React hooks, and ready-to-use components for Bible content.

Quick Start

Prerequisites

• Node.js >= 20.0.0
• pnpm >= 9.0.0 (required for monorepo development)
• YouVersion Platform App Key (Get one here)

Installation

# For UI components
pnpm add @youversion/platform-react-ui

# For React hooks only
pnpm add @youversion/platform-react-hooks

# For direct API access
pnpm add @youversion/platform-core

Quick Start Examples

UI Components

import { BibleSDKProvider, YVPProvider, VerseOfTheDay } from '@youversion/platform-react-ui';
import '@youversion/platform-react-ui/styles.css';

function App() {
  return (
    <BibleSDKProvider appKey="YOUR_APP_KEY">
      <YVPProvider config={{ appKey: "YOUR_APP_KEY" }}>
        <VerseOfTheDay versionId={111} />
      </YVPProvider>
    </BibleSDKProvider>
  );
}

Custom Hooks

import { BibleSDKProvider, usePassage } from '@youversion/platform-react-hooks';

function BibleVerse() {
  const { passage, loading } = usePassage(111, 'JHN.3.16');
  if (loading) return <div>Loading...</div>;
  return <div dangerouslySetInnerHTML={{ __html: passage?.content || '' }} />;
}

function App() {
  return (
    <BibleSDKProvider appKey="YOUR_APP_KEY">
      <BibleVerse />
    </BibleSDKProvider>
  );
}

Core API

import { ApiClient, BibleClient } from '@youversion/platform-core';

const apiClient = new ApiClient({ appKey: 'YOUR_APP_KEY' });
const bibleClient = new BibleClient(apiClient);

const versions = await bibleClient.getVersions('en*');
const passage = await bibleClient.getPassage(111, 'JHN.3.16');

Packages

• @youversion/platform-react-ui - Pre-built components with styling
• @youversion/platform-react-hooks - React hooks for custom UI
• @youversion/platform-core - Type-safe API client

Contributing

See CONTRIBUTING.md for development setup and workflow.

License

Apache 2.0