@hthub247/fieldcraft-document-reader

An efficient React Native file reader library designed for comprehensive document handling with support for multiple file types and advanced content extraction capabilities.

Overview

This library provides a robust foundation for building document reading applications in React Native. While currently implementing basic PDF support, it's architected to handle multiple file types with efficient page content extraction and rendering.

Current Features

• 📄 PDF Document Reading: Native PDF rendering with smooth scrolling
• 🔍 Text Extraction: Extract text from individual pages or page ranges
• 📱 Cross-Platform: Works on both iOS and Android
• ⚡ Performance Optimized: Efficient memory management and rendering
• 🔧 Customizable: Configurable zoom levels, spacing, and display options

Roadmap

• 📊 Multi-Format Support: DOC, DOCX, TXT, HTML, RTF, and more
• 🔗 URL Support: Load documents directly from HTTP/HTTPS URLs
• 🎯 Advanced Extraction: Tables, images, metadata extraction
• 🔄 Batch Processing: Handle multiple documents efficiently
• 🎨 Custom Rendering: Pluggable rendering engines for different file types

Installation

npm install @hthub247/fieldcraft-document-reader
# or
yarn add @hthub247/fieldcraft-document-reader

iOS Setup

Add the following to your ios/Podfile:

pod 'fieldcraft-document-reader', :path => '../node_modules/@hthub247/fieldcraft-document-reader'

Then run:

cd ios && pod install

Android Setup

No additional setup required for Android. The library will be automatically linked.

Usage

import React, { useRef } from 'react';
import { View } from 'react-native';
import { FieldcraftDocumentReader } from '@hthub247/fieldcraft-document-reader';

const DocumentViewer = () => {
  const documentReaderRef = useRef(null);

  const handleDocumentLoaded = (info) => {
    console.log('Document loaded:', info);
  };

  const handlePageChanged = (page, totalPages) => {
    console.log('Page changed:', page, 'of', totalPages);
  };

  const goToNextPage = () => {
    documentReaderRef.current?.nextPage();
  };

  const goToPrevPage = () => {
    documentReaderRef.current?.prevPage();
  };

  return (
    <View style={{ flex: 1 }}>
      <FieldcraftDocumentReader
        ref={documentReaderRef}
        source="https://example.com/document.pdf"
        documentType="pdf"
        onDocumentLoaded={handleDocumentLoaded}
        onPageChanged={handlePageChanged}
        style={{ flex: 1 }}
      />
    </View>
  );
};

API Reference

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | source | string | - | Required. URL or file path to the document | | documentType | 'pdf' \| 'doc' \| 'docx' \| 'markdown' \| 'text' \| 'html' \| 'rtf' | 'pdf' | Type of document | | maxZoom | number | 4.0 | Maximum zoom level | | minZoom | number | 0.5 | Minimum zoom level | | initialPage | number | 1 | Initial page to display | | enableWidthFit | boolean | false | Enable width-fit scaling | | maxDisplayWidth | number | 800 | Maximum display width for scaling |

Events

| Event | Description | |-------|-------------| | onDocumentLoaded | Called when document is loaded successfully | | onPageChanged | Called when page changes | | onZoomChanged | Called when zoom level changes | | onLoadProgress | Called during document loading | | onError | Called when an error occurs |

Methods

| Method | Description | |--------|-------------| | goToPage(page: number) | Navigate to specific page | | nextPage() | Go to next page | | prevPage() | Go to previous page | | zoomIn() | Increase zoom level | | zoomOut() | Decrease zoom level | | setZoom(scale: number) | Set specific zoom level | | extractTextFromPage(page: number) | Extract text from specific page | | extractTextFromRange(startPage: number, endPage: number) | Extract text from page range |

Contributing

We welcome contributions to help expand this library's capabilities! Here's how you can get involved:

🚀 Getting Started

1. Fork the repository
2. Clone your fork: git clone https://github.com/hthub247/fieldcraft-document-reader.git
3. Install dependencies: npm install
4. Create a feature branch: git checkout -b feature/your-feature-name

🛠️ Development Setup

# Install dependencies
npm install

# Build the library
npm run build:bob

# Run tests
npm test

# Run linting
npm run lint

# Type checking
npm run typecheck

📋 Areas We Need Help With

High Priority

• Multi-format Support: Implement readers for DOC, DOCX, TXT, HTML, RTF
• Advanced Text Extraction: Tables, lists, formatting preservation
• Image Extraction: Extract and render images from documents
• Metadata Extraction: Author, creation date, document properties

Medium Priority

• URL Loading: HTTP/HTTPS document loading
• Batch Processing: Handle multiple documents efficiently
• Performance Optimization: Memory management for large files
• Accessibility: Screen reader support and keyboard navigation

Low Priority

• Custom Rendering: Pluggable rendering engines
• Document Conversion: Convert between formats
• Search Functionality: Full-text search within documents
• Annotation Support: Highlighting, notes, bookmarks

🎯 How to Contribute

1. Bug Reports

• Use the GitHub issue template
• Include steps to reproduce
• Specify React Native and library versions
• Add device/platform information

2. Feature Requests

• Check existing issues first
• Describe the use case and expected behavior
• Consider the library's architecture and goals

3. Code Contributions

• Follow the existing code style
• Add tests for new functionality
• Update documentation
• Ensure all tests pass

📝 Code Style Guidelines

• TypeScript: Use TypeScript for all new code
• Naming: Use descriptive, camelCase names
• Comments: Document complex logic and public APIs
• Testing: Write unit tests for new features
• Platform Support: Ensure iOS and Android compatibility

🧪 Testing

# Run all tests
npm test

# Run tests in watch mode
npm test -- --watch

# Run tests with coverage
npm test -- --coverage

📦 Building

# Clean and build
npm run clean
npm run build:bob

# Verify the build
ls lib/

🔄 Pull Request Process

1. Update documentation for any new features
2. Add tests for new functionality
3. Update CHANGELOG.md with your changes
4. Ensure CI passes (tests, linting, type checking)
5. Request review from maintainers

🏗️ Architecture Overview

src/
├── index.tsx                 # Main export file
├── types.ts                  # TypeScript definitions
├── DocumentReaderView.tsx    # Core document reader component
└── NativeFieldcraftDocumentReader.ts # Native module interface

android/                      # Android native implementation
├── src/main/java/com/hthub247/fieldcraftdocumentreader/
└── build.gradle

ios/                         # iOS native implementation
├── FieldcraftDocumentReaderView.h
├── FieldcraftDocumentReaderView.m
└── FieldcraftDocumentReaderViewManager.m

🤝 Community

• Discussions: Use GitHub Discussions for questions and ideas
• Issues: Report bugs and request features
• Pull Requests: Submit code contributions
• Documentation: Help improve docs and examples

📄 License

By contributing, you agree that your contributions will be licensed under the MIT License.

Support

• Documentation: Check the GitHub Wiki
• Issues: GitHub Issues
• Email: [email protected]
• Discord: Join our community

Made with ❤️ by HTHub247