UDF Viewer React

A professional, easy-to-use React component for rendering UYAP UDF (Ulusal Yargı Ağı Bilişim Sistemi) documents directly in the browser.

This library parses .udf files (which are standard ZIP archives containing XML) and renders them with proper formatting, preserving the original layout, styles, and embedded images.

Features

• 📄 Full UDF Support: Renders paragraphs, tables, headers, footers, and embedded images.
• 🎨 High Fidelity: Preserves fonts, colors, bold/italic/underline styles, and indentation.
• ⚛️ React Component: Easy parsing and rendering with a single component.
• 📦 Lightweight: Built with fast-xml-parser and jszip.
• 🛡️ TypeScript: Fully typed for better development experience.

Installation

npm install udf-viewer-react

Usage

Basic Usage

import { UdfViewer } from 'udf-viewer-react';
import 'udf-viewer-react/dist/udf-viewer.css';

function App() {
  return (
    <div style={{ height: '100vh', background: '#ccc' }}>
        <UdfViewer 
            url="https://example.com/document.udf"
            style={{ margin: '0 auto' }}
        />
    </div>
  );
}

Loading from Local File Input

import { useState } from 'react';
import { UdfViewer } from 'udf-viewer-react';
import 'udf-viewer-react/dist/udf-viewer.css';

function App() {
  const [file, setFile] = useState(null);

  return (
    <div>
      <input 
        type="file" 
        accept=".udf" 
        onChange={(e) => setFile(e.target.files[0])} 
      />
      
      {file && (
        <UdfViewer 
          file={file} 
          onError={(err) => alert("Error: " + err.message)}
        />
      )}
    </div>
  );
}

API

<UdfViewer /> Props

| Prop | Type | Description | |------|------|-------------| | url | string | URL to a valid .udf file. | | file | File | ArrayBuffer | Local file object or ArrayBuffer data. | | className | string | Custom CSS class for the wrapper. | | style | CSSProperties | Custom inline styles. | | onLoad | (data: ParseResult) => void | Callback when parsing finishes successfully. | | onError | (error: Error) => void | Callback when an error occurs. | | loadingComponent | ReactNode | Custom component to show while loading. | | errorComponent | (err: Error) => ReactNode | Custom component to show on error. |

License

MIT