📚 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
• 📖 Quick access to “Read Now” interface (optional)
• 📚 Dynamic comics panel pulled using your apiKey and apiURL
• 🗂️ Episodes panel for browsing series episodes
• 🔧 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

🚀 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" showEntryIcon={true} />
    </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 | Description | | --------------- | ------- | -------- | --------------------------------------------------------- | | apiKey | string | ✅ Yes | Your Clubzella API key for fetching data. | | apiURL | string | ✅ Yes | Clubzella API URL for fetching data. | | showEntryIcon | boolean | ❌ No | Show the entry FAB and Read Now preview (default: false). |

🧱 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)
• 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).