Alkitab TB2 LAI - React Library

Library React untuk menampilkan Alkitab Terjemahan Baru 2 (TB2) dari Lembaga Alkitab Indonesia.

Features

• ✅ Dua Mode Display: Inline component atau window baru
• ✅ Navigation: Browse kitab, pasal, dan ayat
• ✅ Search: Cari ayat berdasarkan kata kunci
• ✅ Copy Reference: Salin referensi ayat (bukan konten)
• ✅ Anti-Copy Protection: Konten teks menggunakan canvas (tidak bisa di-copy)
• ✅ API Integration: Terintegrasi dengan API LAI (dengan domain whitelisting)
• ✅ Customizable: Custom styling dan feature toggles
• ✅ TypeScript: Full TypeScript support
• ✅ Responsive: Mobile-friendly design

Installation

npm install alkitab-tb-2-lai
# or
yarn add alkitab-tb-2-lai

Usage

1. Inline Mode (Component)

Render Alkitab langsung di halaman Anda:

import { AlkitabTB2 } from 'alkitab-tb-2-lai';
import 'alkitab-tb-2-lai/style.css';

function MyApp() {
  return (
    <AlkitabTB2
      apiKey="YOUR_API_KEY"
      initialBook="Kejadian"
      initialChapter={1}
      initialVerse={1}
      features={{
        navigation: true,
        search: true,
        copyVerse: true,
      }}
      showBranding={true}
      onVerseSelect={(book, chapter, verse) => {
        console.log(`Selected: ${book} ${chapter}:${verse}`);
      }}
      onCopyVerse={(reference) => {
        console.log(`Copied: ${reference}`);
      }}
      onError={(error) => {
        console.error('Error:', error);
      }}
    />
  );
}

2. Window Mode (Function)

Buka Alkitab di window browser baru:

import { openAlkitab } from 'alkitab-tb-2-lai';

function MyComponent() {
  const handleOpenAlkitab = () => {
    const alkitabWindow = openAlkitab({
      displayMode: 'window',
      apiKey: 'YOUR_API_KEY',
      initialBook: 'Yohanes',
      initialChapter: 3,
      initialVerse: 16,
      windowConfig: {
        width: 900,
        height: 700,
      },
      features: {
        navigation: true,
        search: true,
        copyVerse: true,
      },
      showBranding: true,
      title: 'Alkitab LAI TB2',
      onClose: () => {
        console.log('Window closed');
      },
    });

    // Opsional: simpan referensi window untuk close manual
    // alkitabWindow?.close();
  };

  return (
    <button onClick={handleOpenAlkitab}>
      Buka Alkitab
    </button>
  );
}

API Reference

AlkitabTB2 Component Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | apiKey | string | Required | API key untuk akses LAI API | | apiEndpoint | string | https://api.alkitab-lai.id/v1 | Custom API endpoint (opsional) | | initialBook | string | First book | Kitab awal yang ditampilkan | | initialChapter | number | 1 | Pasal awal yang ditampilkan | | initialVerse | number | 1 | Ayat awal yang ditampilkan | | features | AlkitabTB2Features | All enabled | Toggle fitur navigation, search, copyVerse | | customStyles | AlkitabTB2CustomStyles | {} | Custom CSS styles untuk container, header, dll | | showBranding | boolean | true | Tampilkan logo dan copyright LAI | | title | string | "Alkitab LAI TB2" | Custom title | | onVerseSelect | function | - | Callback saat ayat dipilih | | onCopyVerse | function | - | Callback saat referensi di-copy | | onError | function | - | Callback saat terjadi error |

openAlkitab() Function Config

| Prop | Type | Default | Description | |------|------|---------|-------------| | displayMode | 'window' | Required | Harus 'window' | | apiKey | string | Required | API key untuk akses LAI API | | windowConfig | WindowConfig | Default size & centered | Konfigurasi window (width, height, position) | | initialBook | string | First book | Kitab awal | | initialChapter | number | 1 | Pasal awal | | initialVerse | number | 1 | Ayat awal | | features | AlkitabTB2Features | All enabled | Toggle fitur | | showBranding | boolean | true | Tampilkan branding LAI | | title | string | "Alkitab LAI TB2" | Window title | | onClose | function | - | Callback saat window ditutup |

Getting API Key

Untuk mendapatkan API key:

1. Daftar di LAI Developer Portal (placeholder URL)
2. Registrasi domain website Anda
3. API akan di-validasi dengan domain whitelisting untuk keamanan

Demo Mode: Gunakan apiKey="DEMO_KEY" untuk testing dengan data mock.

API Endpoints

Library ini menggunakan LAI API dengan struktur:

• GET /api/books - List semua kitab
• GET /api/books/:bookId/chapters/:chapterId - Ambil pasal dengan ayat-ayat
• GET /api/search?q=query - Cari ayat berdasarkan keyword

Security & Anti-Copy

Library ini menggunakan Canvas rendering untuk mencegah copy-paste konten ayat:

• Text di-render menggunakan HTML5 Canvas
• Right-click disabled
• Text selection disabled
• Hanya referensi ayat yang bisa di-copy (misal: "Yohanes 3:16")

Note: Ini bukan security yang sempurna 100%, tapi cukup untuk mengurangi copy-paste casual.

Domain Whitelisting

API menggunakan domain whitelisting untuk keamanan:

• Library mengirim X-Origin header dengan domain Anda
• API backend memvalidasi apakah domain terdaftar
• Mencegah unauthorized usage dari domain lain

Note: API calls tetap visible di browser Network tab (ini limitasi browser). Domain whitelisting memberikan layer security tambahan.

TypeScript Support

Library ini fully typed dengan TypeScript:

import type {
  AlkitabTB2Props,
  OpenAlkitabConfig,
  Book,
  Chapter,
  Verse,
  SearchResult,
} from 'alkitab-tb-2-lai';

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build library
npm run build

# Lint
npm run lint

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers (iOS Safari, Chrome Android)

License

MIT License

Credits

Alkitab Terjemahan Baru 2 (TB2) adalah hak cipta Lembaga Alkitab Indonesia dan dilindungi undang-undang.

Library ini dibuat untuk memudahkan integrasi Alkitab TB2 ke website/aplikasi dengan izin dari LAI.

Support

Untuk pertanyaan dan support:

• Email: [email protected] (placeholder)
• Issues: GitHub Issues

© 2025 Lembaga Alkitab Indonesia