Put it in your app React component

React component

<FileDrive> is the whole drive: the search, the sections, the list and the grid, the details, the viewer, uploads, sharing and the settings. It takes the height it is given and asks nothing of your CSS.

Start

Put it in a page

A client component, in an element with a height. With Rebodocs installed, Word documents are read by its engine.

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: server

Prop	Type	What it does
base	`string`	Where the routes of @rebofiles/server are. `/api/files` unless said.
client	`DriveClient`	A client of your own instead of `base`: the drive kept in the page (`createMemoryClient`), or one shared with the rest of the page.
headers	`() => Record<string, string>`	Headers for every request to your server, such as a token of the session; never sent to the bucket. May be async.
linkAddress	`(token) => string`	Where a link of the drive points: your page with <SharedLink>. This page with `?link=` unless given.
settings	`boolean`	`false` leaves out the screen of settings and the button that opens it.

Props

Props: look

Prop	Type	What it does
language	`'en' \| 'es' \| 'zh'`	Under each person’s own choice, over the drive’s. English unless given.
texts	`Texts`	The words of another language, with the keys of `TEXTS.en`.
theme	`'light' \| 'dark' \| 'auto'`	Under each person’s own choice, over the drive’s. `auto` follows the system.
title	`string`	The name over the drive: your application’s, or “Files”.
logo	`ReactNode`	What goes before the title; ReboFiles’ mark unless given. A Node for mountDrive.
defaultView	`'list' \| 'grid'`	How a folder is shown the first time.
layout	`'full' \| 'compact'`	`compact`: no column on the left; New and the places in a strip over the list, for a drive in a smaller part of a page.
className	`string`	A class of your own on `.rf-drive`, for its custom properties.
chrome	`boolean`	`false` leaves out its bar and its sections, for your application’s own around it: it drives it with `go`, `search`, `upload`, `newFolder`, `requestFiles`, `share`, `openSettings`.
root	`EntryId`	The folder it is kept in, as the files of one record of yours: it starts there, its path starts there, nothing above it.
onState	`(state) => void`	Where it is, each time that changes: the section, the folder and its path, what is searched, how many, the space; for your own bar.
controls	`RefObject<DriveControls>`	React: the drive’s `go`, `search`, `upload`, `newFolder`, `requestFiles`, `share` and `openSettings`, put in it while it is there.

Props

Props: files

Prop	Type	What it does
checkUploads	`boolean`	`false` uploads without looking for the same file, or one of its name, in the drive first: a taken name is made free with “(2)”.
requestTemplates	`boolean`	`false` leaves out the templates of requests: to start one from, and to save one as.
qr	`boolean`	`false` leaves out the QR code of a request made.
onOpen	`(file, url) => void`	A file opened by a double click or Enter, your own way. Unless given, the drive’s viewer shows it.
fields	`'show' \| 'edit' \| false`	The fields of your application on an entry, in its details: shown (as it comes), changed there by who may rename it (`edit`), or left out.

Props

Props: Word documents

Prop	Type	What it does
previewDocument	`(bytes) => DocumentPreview`	The details of a .docx: its title and first paragraphs. `previewDocx`.
viewDocument	`(element, bytes) => ShownDocument`	The viewer of a .docx: its pages, one by one or all, with Rebodocs’ zoom and print. `viewDocx`.
thumbDocument	`(bytes) => Promise<HTMLElement>`	Its first page drawn in the grid, until a picture of it is made. `thumbDocx`.
pictureDocument	`(bytes, size, type, quality) => Promise<Blob>`	Its first page as a picture, made at upload and kept as its thumbnail in the drive’s sizes. `pictureOfDocx`.
textDocument	`(bytes) => string`	What is written in it, sent at upload, for a search to find it by. `textOfDocx`.
onOpenDocument	`(file, url) => void`	Gives a .docx an “Open in Rebodocs” button, called with an address to read it from.
compareDocument	`(element, before, after) => ShownDocument`	“Compare” on each version but the current, in the history: what changed, over its pages. `compareDocx`.
newDocument	`() => Uint8Array`	“New document” in the Upload menu: an empty .docx named by the person, in the folder they are in, then opened. `newDocx`.

Props

Props: events

Prop	Type	What it does
onChange	`() => void`	After every change made from the drive, for what else in the page shows it (mountDrive; in React, the provider tells the hooks).
live	`boolean`	What others change, shown as it happens, from the server’s `/events`. `true` unless said; in React, the provider’s.

Sharing

The page of a link

What someone sent a link sees, without signing in: what it reads, its folders, a .zip of them; its password asked first when it has one.

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" />;
}

Point the drive’s links at it with linkAddress.

Know

When a prop changes

language, theme, title and the callbacks are taken as they change, without starting again.
base, client or headers make the drive’s client again; what was going up goes on with the old one.
Inside a <DriveProvider> of yours, it uses that one’s client and words: what it does, your hooks see.