Inicio rápido

1. Envuelve tu aplicación con `MarkpdfProvider`

App.tsx

import { MarkpdfProvider } from "@markpdf/react";

export default function App() {
  return (
    <MarkpdfProvider apiKey={import.meta.env.VITE_MARKPDF_API_KEY}>
      <UploadForm />
    </MarkpdfProvider>
  );
}

MarkpdfProvider crea un MarkpdfClient compartido y lo expone a todo el árbol a través del contexto.

2. Sube un archivo con `useConvertFile`

UploadForm.tsx

import { useConvertFile } from "@markpdf/react";

export function UploadForm() {
  const { convert, status, progress, markdown, error } = useConvertFile();

  return (
    <div>
      <input
        type="file"
        accept="application/pdf"
        onChange={(e) => {
          const file = e.target.files?.[0];
          if (file) convert(file, { mode: "fast" });
        }}
      />

      {status === "uploading" && <progress value={progress} max={100} />}
      {status === "converting" && <p>Convirtiendo…</p>}
      {status === "error" && <p>Error: {error?.message}</p>}
      {markdown && <pre>{markdown}</pre>}
    </div>
  );
}

useConvertFile informa el progreso de la carga en tiempo real porque usa XMLHttpRequest internamente (fetch no expone los eventos de progreso de la carga).

3. Acceso directo al cliente (sin gancho de progreso)

import { useMarkpdf } from "@markpdf/react";

function DownloadButton({ url }: { url: string }) {
  const client = useMarkpdf();

  const handleClick = async () => {
    const markdown = await client.convertFromUrl(url, { mode: "fast" });
    console.log(markdown);
  };

  return <button onClick={handleClick}>Convertir</button>;
}

useMarkpdf() le proporciona el MarkpdfClient sin formato: todos los métodos @markpdf/sdk (convertFile, convertFromUrl, convertStream, pdfIndex, getJob) están disponibles, sin informe de progreso.

Python

Node.js / TypeScript

C++

Next.js

Angular

React

React Native

Svelte

Bun

Flutter

Java

Kotlin

Inicio rápido

Inicio rápido

1. Envuelve tu aplicación con `MarkpdfProvider`

2. Sube un archivo con `useConvertFile`

3. Acceso directo al cliente (sin gancho de progreso)

Siguiente paso

​Inicio rápido

​1. Envuelve tu aplicación con MarkpdfProvider

​2. Sube un archivo con useConvertFile

​3. Acceso directo al cliente (sin gancho de progreso)

​Siguiente paso

Inicio rápido

1. Envuelve tu aplicación con `MarkpdfProvider`

2. Sube un archivo con `useConvertFile`

3. Acceso directo al cliente (sin gancho de progreso)

Siguiente paso