Ponlo en tu app Componente de React

Componente de React

<FileDrive> es el drive completo: la búsqueda, las secciones, la lista y la cuadrícula, los detalles, el visor, las subidas, compartir y los ajustes. Ocupa la altura que se le da y no pide nada a tu CSS.

Empezar

Ponlo en una página

Un componente de cliente, dentro de un elemento con altura. Con Rebodocs instalado, los documentos de Word se leen con su motor.

app/files/page.tsx

'use client';
import { FileDrive } from '@rebofiles/react';
import { pictureOfDocx, previewDocx, textOfDocx, thumbDocx, viewDocx } from '@rebofiles/react/rebodocs';

export default function Files() {
  return (
    <div style={{ height: 'calc(100vh - 64px)' }}>
      <FileDrive
        base="/api/files"
        title="Acme Files"
        language="es"
        theme="auto"
        headers={async () => ({ authorization: `Bearer ${await token()}` })}
        linkAddress={(token) => `${location.origin}/shared?link=${token}`}
        previewDocument={previewDocx}
        viewDocument={viewDocx}
        thumbDocument={thumbDocx}
        pictureDocument={pictureOfDocx}
        textDocument={textOfDocx}
      />
    </div>
  );
}

Props

Props: servidor

Prop	Type	What it does
base	`string`	Dónde están las rutas de @rebofiles/server. `/api/files` si no se dice.
client	`DriveClient`	Un cliente propio en lugar de `base`: el drive guardado en la página (`createMemoryClient`), o uno compartido con el resto de la página.
headers	`() => Record<string, string>`	Cabeceras para cada petición a tu servidor, como un token de la sesión; nunca se envían al bucket. Puede ser async.
linkAddress	`(token) => string`	Adónde apunta un enlace del drive: tu página con <SharedLink>. Esta página con `?link=` si no se da.
settings	`boolean`	`false` quita la pantalla de ajustes y el botón que la abre.

Props

Props: aspecto

Prop	Type	What it does
language	`'en' \| 'es' \| 'zh'`	Por debajo de la elección de cada persona, por encima de la del drive. Inglés si no se da.
texts	`Texts`	Las palabras de otro idioma, con las claves de `TEXTS.en`.
theme	`'light' \| 'dark' \| 'auto'`	Por debajo de la elección de cada persona, por encima de la del drive. `auto` sigue al sistema.
title	`string`	El nombre sobre el drive: el de tu aplicación, o “Files”.
logo	`ReactNode`	Lo que va antes del título; la marca de ReboFiles si no se da. Un Node para mountDrive.
defaultView	`'list' \| 'grid'`	Cómo se muestra una carpeta la primera vez.
layout	`'full' \| 'compact'`	`compact`: sin columna a la izquierda; Nuevo y los lugares en una franja sobre la lista, para un drive en una parte más pequeña de la página.
className	`string`	Una clase propia en `.rf-drive`, para sus propiedades personalizadas.
chrome	`boolean`	`false` quita su barra y sus secciones, para que tu aplicación ponga las suyas: lo maneja con `go`, `search`, `upload`, `newFolder`, `requestFiles`, `share` y `openSettings`.
root	`EntryId`	La carpeta en la que se queda, como los archivos de un registro tuyo: empieza ahí, su ruta empieza ahí y nada por encima.
onState	`(state) => void`	Dónde está, cada vez que cambia: la sección, la carpeta y su ruta, lo buscado, cuántos y el espacio; para tu propia barra.
controls	`RefObject<DriveControls>`	React: `go`, `search`, `upload`, `newFolder`, `requestFiles`, `share` y `openSettings` del drive, puestos en él mientras está.

Props

Props: archivos

Prop	Type	What it does
checkUploads	`boolean`	`false` sube sin buscar antes el mismo archivo, o uno con su nombre, en el drive: un nombre ocupado se libera con “(2)”.
requestTemplates	`boolean`	`false` quita las plantillas de solicitudes: para empezar de una y para guardar una.
qr	`boolean`	`false` quita el código QR de una solicitud hecha.
onOpen	`(file, url) => void`	Un archivo abierto con doble clic o Enter, a tu manera. Si no se da, lo muestra el visor del drive.
fields	`'show' \| 'edit' \| false`	Los campos de tu aplicación en una entrada, en sus detalles: se muestran (si no se dice), se cambian ahí por quien puede renombrarla (`edit`), o se dejan fuera.

Props

Props: documentos de Word

Prop	Type	What it does
previewDocument	`(bytes) => DocumentPreview`	Los detalles de un .docx: su título y primeros párrafos. `previewDocx`.
viewDocument	`(element, bytes) => ShownDocument`	El visor de un .docx: sus páginas, una a una o todas, con el zoom y la impresión de Rebodocs. `viewDocx`.
thumbDocument	`(bytes) => Promise<HTMLElement>`	Su primera página dibujada en la cuadrícula, hasta que se haga una imagen de ella. `thumbDocx`.
pictureDocument	`(bytes, size, type, quality) => Promise<Blob>`	Su primera página como imagen, hecha al subir y guardada como su miniatura en los tamaños del drive. `pictureOfDocx`.
textDocument	`(bytes) => string`	Lo que tiene escrito, enviado al subir, para que una búsqueda lo encuentre. `textOfDocx`.
onOpenDocument	`(file, url) => void`	Da a un .docx un botón “Abrir en Rebodocs”, llamado con una dirección desde la que leerlo.
compareDocument	`(element, before, after) => ShownDocument`	“Comparar” en cada versión salvo la actual, en el historial: lo que cambió, sobre sus páginas. `compareDocx`.
newDocument	`() => Uint8Array`	“Documento nuevo” en el menú Subir: un .docx vacío con el nombre que le da la persona, en la carpeta donde está, y luego abierto. `newDocx`.

Props

Props: eventos

Prop	Type	What it does
onChange	`() => void`	Tras cada cambio hecho desde el drive, para lo demás de la página que lo muestra (mountDrive; en React, el provider avisa a los hooks).
live	`boolean`	Lo que cambian otros, mostrado en el momento, desde `/events` del servidor. `true` si no se dice; en React, el del provider.

La página de un enlace

Lo que ve quien recibió un enlace, sin iniciar sesión: lo que puede leer, sus carpetas, un .zip de ellas; primero se pide la contraseña, si tiene.

app/shared/page.tsx

'use client';
import { SharedLink } from '@rebofiles/react';
import { useSearchParams } from 'next/navigation';

export default function Shared() {
  return <SharedLink base="/api/files" token={useSearchParams().get('link') ?? ''} theme="auto" />;
}

Haz que los enlaces del drive apunten a ella con linkAddress.

A saber

Cuando cambia una prop

language, theme, title y los callbacks se aplican al cambiar, sin volver a empezar.
base, client o headers vuelven a crear el cliente del drive; lo que estaba subiendo sigue con el anterior.
Dentro de un <DriveProvider> tuyo, usa el cliente y las palabras de ese: lo que hace, lo ven tus hooks.