Components · Inkoxide

Every component is imported from @inkoxide/render, and the browser helpers from @inkoxide/render/browser. Each page below lists what its components are for and the props they take, from the source of the package.

Page	Components	What they are for
Document	`Document`	The PDF itself: its metadata, language, fallback fonts, PDF/A and encryption.
Page	`Page`, `Header`, `Footer`, `PageNumber`, `TotalPages`, `PageBreak`	Pages, the headers and footers repeated on them, page numbers and page breaks.
View	`View`, `Spacer`	The box everything is laid out in: flexbox, grid, and empty space.
Text	`Text`, `Link`	Paragraphs, the runs inside them, and links.
Image	`Image`, `ImageBackground`	JPEG, PNG, GIF, WebP and SVG images, on their own, in a line of text or behind a box.
Table	`Table`, `Row`, `Cell`	Tables that split across pages and repeat their header rows.
SVG	`Svg`, `G`, `Path`, `Rect`, `Circle`, `Ellipse`, `Line`, `Polyline`, `Polygon`, `Tspan`, `Defs`, `ClipPath`, `Marker`, `LinearGradient`, `RadialGradient`, `Stop`	Vector drawing in JSX: shapes, paths, gradients, markers and SVG text.
Canvas	`Canvas`	Drawing in code, with a painter, at a size the layout gives it.
Form fields	`TextField`, `TextInput`, `Checkbox`, `Radio`, `Select`, `List`, `Field`, `FieldSet`	Text fields, checkboxes, radio buttons, selects and lists that can be filled in any PDF viewer.
Note	`Note`	A text note: an icon that opens its text in the viewer.
In the browser	`usePdf`, `PdfDownloadLink`, `PdfViewer`	The hook and the components of @inkoxide/render/browser that render a document in the page.

Shared props

Most components take these, besides their own; each component’s page says which.

Prop	Type	Description
`className`	`string`
`style`	`Style`
`id`	`string`	Node id: the target of `href="#id"` links.
`debug`	`boolean`	Draws the element's boxes over the page: margin (orange), border (yellow), padding (green), content box (blue outline) and its size in points. A development aid; it changes the output. Not on a `<Text>` or `<Link>` inside a `<Text>`: a run of the paragraph has no box of its own, so put it on the outer `<Text>`.

Elements in the flow of a page (View, Text, Link, Image, ImageBackground, Table, FieldSet, and in part Note and the form fields) also take:

Prop	Type	Description
`break`	`BreakProp \| boolean`	`true` is the same as `'page-before'`.
`wrap`	`boolean`	`wrap={false}` is the same as `break="avoid"`.
`minPresenceAhead`	`number`	The same as `break={{ minPresenceAhead }}`, in points.
`fixed`	`boolean`	Repeats the element on every page of its `Page`: a watermark, a page border, a stamp. Only for an element placed directly in the `Page`, with `position: 'absolute'`: it is placed against the page content box (inside the margins) and takes no space. `render` and `pages` work inside it; `break`, `wrap` and `minPresenceAhead` do not, on it or inside it. For content that needs room on every page, use `<Header>` or `<Footer>`.
`pages`	`PageFilter`	Pages that paint this element (it keeps its layout space on the others): `'first'`, `'last'`, `'notFirst'`, `'notLast'`, `'odd'`, `'even'`, or page numbers (negative from the end, `[-1]` is the last page).
`href`	`string`	Makes the element a link: `https://…`, `mailto:…` or `#id`.
`bookmark`	`BookmarkProp`	Adds an entry to the PDF outline.

A Text or Link inside a Text is a run of the paragraph: it takes only text styles, href, lang, hyphenate and hyphenationCallback.