📚 clubzella-comics-widget

A plug-and-play comics widget for React Native apps. Built to display Clubzella comics through a floating button UI that opens an interactive panel for users to explore and read content.

✨ Features

• 🔘 Floating action button (FAB) with custom circular UI
• 🎨 Multiple entry styles – choose between icon or banner display
• 📖 Quick access to "Read Now" interface (optional)
• 📚 Dynamic comics panel pulled using your apiKey and apiURL
• 🗂️ Episodes panel for browsing series episodes
• 🔍 Pinch-to-zoom with pan, double-tap zoom, and zoom controls
• 🔧 Minimal configuration – just import and drop into your app

📦 Installation

npm install clubzella-comics-widget
# or
yarn add clubzella-comics-widget

Ensure you have installed the peer dependencies:

npm install react react-native @expo/vector-icons expo-font react-native-gesture-handler react-native-reanimated

🚀 Usage

Ensure you keep the widget component outside a scroller.

import React from "react"
import { Widget, ComicsProvider } from "clubzella-comics-widget"

export default function App() {
  return (
    <ComicsProvider>
      {/* Other components */}
      {/* Important: keep the widget outside a scroller. */}
      <Widget
        apiKey="YOUR_API_KEY"
        apiURL="API_URL"
        showEntry={true}
        entryType="icon"
      />
    </ComicsProvider>
  )
}

This will render a floating widget button at the bottom right of your app. When tapped, it expands to a panel displaying Clubzella comics episodes.

⚙️ Props

| Prop | Type | Required | Default | Description | | ----------- | -------------------- | -------- | -------- | ---------------------------------------------------------------- | | apiKey | string | ✅ Yes | – | Your Clubzella API key for fetching data. | | apiURL | string | ✅ Yes | – | Clubzella API URL for fetching data. | | showEntry | boolean | ❌ No | false | Show the entry FAB and Read Now preview. | | entryType | "icon" \| "banner" | ❌ No | "icon" | Display style for the entry point – compact icon or full banner. |

🔍 Zoom & Pan Controls

The comics reader includes full gesture support for an immersive reading experience:

| Gesture | Action | | ---------------------- | --------------------------------------- | | Pinch | Zoom in/out (up to 3x) | | Double-tap | Toggle between 2x zoom and reset | | Single-finger drag | Scroll through pages (when not zoomed) | | Single-finger drag | Pan around the page (when zoomed) | | Zoom buttons | Manual zoom in/out via toolbar | | Reset button | Appears when zoomed – tap to reset view |

💡 When zoomed in, page scrolling is disabled to allow free panning. Double-tap or use the reset button to return to normal reading mode.

🧱 Components Breakdown

Internally, the widget includes:

• CircleText – Custom FAB content
• ReadNow – Preview + CTA to open the comics panel
• EpisodesPanel – Main episodes listing panel (fetched via apiKey and apiURL)
• InComicsPanel – Full reader with zoom/pan gesture support
• Context: Uses ComicsProvider and useComics for panel state management

All of these are connected and controlled from the Widget root component.

🧩 Context & Hooks

• ComicsProvider: Wrap your app (or widget) with this provider to enable comics panel state.
• useComics: Hook to access and control the comics panel state (isComicsPanelOpen, openComicsPanel, closeComicsPanel).

📱 Entry Type Examples

Icon Entry (entryType="icon")

A compact floating action button – ideal for apps where screen space is limited.

Banner Entry (entryType="banner")

A more prominent banner-style entry point – great for featuring comics content.

// Compact icon
<Widget apiKey="..." apiURL="..." showEntry={true} entryType="icon" />

// Prominent banner
<Widget apiKey="..." apiURL="..." showEntry={true} entryType="banner" />