@caipira/vue-reader 0.0.2 → 0.0.4

package/README.md

@@ -1,17 +1,17 @@
 # @caipira/vue-reader
 
-Headless EPUB reader toolkit for Vue 3.
+Headless reader toolkit for Vue 3.
 
-This package provides a controller-first API and Vue composables for embedding a Readium-based reader in your app.
+This package provides a set of tools for creating your own custom reader. It currently supports:
 
-## What is included
+- Raw text
+- EPUB
 
-- Headless reader controller (`createEpubReaderController`)
-- Vue composables (`useEpubReader`, state/navigation/settings helpers)
-- Reader settings helpers (`useReaderSettings`, `setReaderColors`)
-- Dictionary integration hooks (`setReaderDictionary`, `ReaderDictionaryApi`)
+## What is included
 
-The default loading strategy is `zip-fetcher` and should be used for production today.
+- Headless epub reader via `useEpubReader`, `useEpubReaderState` and `useEpubReaderNavigation`
+- Colors hook `setReaderColors`
+- Dictionary integration hook `setReaderDictionary`
 
 ## Install
 
@@ -19,17 +19,20 @@ The default loading strategy is `zip-fetcher` and should be used for production
 npm install @caipira/vue-reader
 ```
 
-## Quick start (zip-fetcher default)
+## Usage
+
+### Script:
 
 ```ts
 import { useTemplateRef } from 'vue';
 import {
     useEpubReader,
+    setReaderColors,
     useEpubReaderState,
     useEpubReaderNavigation,
-    setReaderColors,
 } from '@caipira/vue-reader';
 
+const epubSrc = 'https://example.com/book.epub';
 const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 
 setReaderColors({
@@ -38,14 +41,30 @@ setReaderColors({
     highlight: '#facc15',
 });
 
-const reader = useEpubReader(() => props.src, containerRef, {
-    assets: {
-        fontBaseUrl: '/fonts',
-    },
-});
+const reader = useEpubReader(() => epubSrc, containerRef);
+const { error, loading } = useEpubReaderState();
+const { goForward, goBackward } = useEpubReaderNavigation();
+```
 
-const state = useEpubReaderState(reader);
-const navigation = useEpubReaderNavigation(reader);
+### Template:
+
+```html
+<section class="w-full flex justify-between">
+    <button
+        icon="chevron-left"
+        @click="goBackward"
+    />
+    <button
+        icon="chevron-right"
+        @click="goForward"
+    />
+</section>
+
+<div
+    ref="containerRef"
+    class="h-full w-full overflow-hidden"
+    :class="{ 'opacity-0': loading || error }"
+/>
 ```
 
 ## Dictionary API
@@ -123,14 +142,9 @@ The `context` value contains nearby text around the clicked word, useful for dis
 
 ## Public API
 
-- `createEpubReaderController(srcRef, containerRef, options)`
-- `useEpubReaderController(src, containerRef, options)`
 - `useEpubReader(src, containerRef, options)`
-- `useEpubReaderState(controller)`
-- `useEpubReaderNavigation(controller)`
-- `useEpubReaderSettings(controller)`
-- `useEpubReaderControllerRef()`
-- `setEpubReaderController(controller)`
+- `useEpubReaderState()`
+- `useEpubReaderNavigation()`
 - `setReaderColors({ background, text, highlight })`
 - `setReaderDictionary(dictionary)`
 - `useReaderDictionary()`