@youversion/platform-react-hooks

React hooks for accessing YouVersion Platform APIs with automatic loading/error states.

When to use this package

Use @youversion/platform-react-hooks when you need to:

• ✅ Build custom React components with Bible features
• ✅ Fetch data declaratively with automatic loading/error states
• ✅ Keep control over component UI while leveraging reusable hooks
• ✅ Support server-side rendering compatible hooks

Use other packages instead if you:

• ❌ Need direct API access → Use @youversion/platform-core for low-level client
• ❌ Want ready-made UI → Use @youversion/platform-react-ui for production components

Install

pnpm add @youversion/platform-react-hooks

Get your App Key at platform.youversion.com

Usage

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

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

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

Documentation and API Reference

• developers.youversion.com/sdks/react

License

This SDK is licensed under Apache 2.0.

Licensing information for the Bible versions is available at the YouVersion Platform site.