or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-react-pdf--types

TypeScript definitions for the react-pdf library ecosystem enabling type-safe PDF generation

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/@react-pdf/types@2.9.x

To install, run

npx @tessl/cli install tessl/npm-react-pdf--types@2.9.0

@react-pdf/types

@react-pdf/types provides comprehensive TypeScript definitions for the react-pdf library ecosystem, enabling type-safe development when creating PDF documents using React components. The package includes type definitions for all core react-pdf functionality including PDF documents, pages, text rendering, styling, images, SVG elements, fonts, bookmarks, and rendering contexts.

Package Information

Package Name: @react-pdf/types
Package Type: npm
Language: TypeScript
Installation: npm install @react-pdf/types

Core Imports

import type { 
  DocumentNode, 
  PageNode, 
  ViewNode, 
  TextNode,
  Style,
  PDFVersion,
  Primitive,
  Context
} from "@react-pdf/types";

For specific categories:

// Document and node types
import type { DocumentNode, PageNode, ViewNode, TextNode } from "@react-pdf/types";

// Styling system
import type { Style } from "@react-pdf/types";

// Font system  
import type { FontStyle, FontWeight, FontDescriptor } from "@react-pdf/types";

// Image handling
import type { SourceObject } from "@react-pdf/types";

// SVG support
import type { SVGPresentationAttributes } from "@react-pdf/types";

// Primitive elements
import { Primitive } from "@react-pdf/types";

Basic Usage

import type { 
  DocumentNode, 
  PageNode, 
  ViewNode, 
  TextNode, 
  Style,
  PDFVersion 
} from "@react-pdf/types";
import { Primitive } from "@react-pdf/types";

// Define styled components with proper typing
const pageStyle: Style = {
  flexDirection: 'column',
  backgroundColor: '#ffffff',
  padding: 20
};

const textStyle: Style = {
  fontSize: 12,
  fontFamily: 'Helvetica',
  color: '#333333'
};

// Type PDF document structure
const document: DocumentNode = {
  type: Primitive.Document,
  props: {
    title: 'My PDF Document',
    author: 'John Doe',
    subject: 'Sample PDF'
  },
  children: [{
    type: Primitive.Page,
    style: pageStyle,
    props: {
      size: 'A4',
      orientation: 'portrait'
    },
    children: [{
      type: Primitive.View,
      style: { padding: 10 },
      children: [{
        type: Primitive.Text,
        style: textStyle,
        children: [{
          type: Primitive.TextInstance,
          value: 'Hello, World!'
        }]
      }]
    }]
  }]
};

Capabilities

Document Structure Types

Core node types representing the PDF document structure.

// Root document node
interface DocumentNode {
  type: Primitive.Document;
  props?: DocumentProps;
  children: PageNode[];
}

// Page container node
interface PageNode {
  type: Primitive.Page;
  style?: Style;
  props?: PageProps;
  children?: (ViewNode | TextNode)[];
}

// View container node
interface ViewNode {
  type: Primitive.View;
  style?: Style;
  props?: ViewProps;
  children?: (ViewNode | TextNode)[];
}

// Text content node
interface TextNode {
  type: Primitive.Text;
  lines?: any[];
  style?: Style;
  props?: TextProps;
  children?: TextInstanceNode[];
}

// Text instance node
interface TextInstanceNode {
  type: Primitive.TextInstance;
  value: string;
}

// Union type of all nodes
type Node = DocumentNode | PageNode | ViewNode;

Document Properties

Properties for configuring PDF document metadata and behavior.

interface DocumentProps {
  title?: string;
  author?: string;
  subject?: string;
  keywords?: string;
  creator?: string;
  producer?: string;
  creationDate?: Date;
  modificationDate?: Date;
  pageLayout?: PageLayout;
  pageMode?: PageMode;
}

type PageLayout =
  | 'singlePage'
  | 'oneColumn'
  | 'twoColumnLeft'
  | 'twoColumnRight'
  | 'twoPageLeft'
  | 'twoPageRight';

type PageMode =
  | 'useNone'
  | 'useOutlines'
  | 'useThumbs'
  | 'fullScreen'
  | 'useOC'
  | 'useAttachments';

Base Component Properties

Common properties shared across different component types.

interface BaseProps {
  id?: string;
  fixed?: boolean;
  break?: boolean;
  debug?: boolean;
  bookmark?: Bookmark;
  minPresenceAhead?: number;
}

interface TextProps extends BaseProps {
  wrap?: boolean;
  widows?: number;
  orphans?: number;
  render?: DynamicRenderCallback;
  hyphenationCallback?: HyphenationCallback;
}

interface ViewProps extends BaseProps {
  wrap?: boolean;
  render?: (props: { pageNumber: number }) => any;
}

interface PageProps extends BaseProps {
  wrap?: boolean;
  size?: PageSize;
  orientation?: Orientation;
  dpi?: number;
}

type DynamicRenderCallback = (props: {
  pageNumber: number;
  totalPages: number;
}) => any;

Page Configuration

Types for defining page sizes and orientations.

type Orientation = 'portrait' | 'landscape';

type PageSize =
  | StandardPageSize
  | [StaticSize]
  | [StaticSize, StaticSize]
  | { width: StaticSize; height?: StaticSize };

type StandardPageSize =
  | '4A0' | '2A0' | 'A0' | 'A1' | 'A2' | 'A3' | 'A4' | 'A5' | 'A6' | 'A7' | 'A8' | 'A9' | 'A10'
  | 'B0' | 'B1' | 'B2' | 'B3' | 'B4' | 'B5' | 'B6' | 'B7' | 'B8' | 'B9' | 'B10'
  | 'C0' | 'C1' | 'C2' | 'C3' | 'C4' | 'C5' | 'C6' | 'C7' | 'C8' | 'C9' | 'C10'
  | 'RA0' | 'RA1' | 'RA2' | 'RA3' | 'RA4'
  | 'SRA0' | 'SRA1' | 'SRA2' | 'SRA3' | 'SRA4'
  | 'EXECUTIVE' | 'FOLIO' | 'LEGAL' | 'LETTER' | 'TABLOID' | 'ID1';

type StaticSize = number | string;

PDF Version Support

PDF version specification for document compatibility.

type PDFVersion = '1.3' | '1.4' | '1.5' | '1.6' | '1.7' | '1.7ext3';

Styling System

Comprehensive CSS-like styling system for PDF elements.

// Main style interface (re-exported from @react-pdf/stylesheet)
interface Style {
  // Layout properties
  display?: 'flex' | 'none';
  position?: 'absolute' | 'relative' | 'static';
  top?: number | string;
  right?: number | string;
  bottom?: number | string;
  left?: number | string;
  zIndex?: number | string;
  overflow?: 'hidden';
  aspectRatio?: number | string;

  // Dimensions
  width?: number | string;
  height?: number | string;
  minWidth?: number | string;
  minHeight?: number | string;
  maxWidth?: number | string;
  maxHeight?: number | string;

  // Flexbox
  flex?: number | string;
  flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
  flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
  flexGrow?: number | string;
  flexShrink?: number | string;
  flexBasis?: number | string;
  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
  alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
  alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'space-evenly';
  justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';

  // Spacing
  margin?: number | string;
  marginTop?: number | string;
  marginRight?: number | string;
  marginBottom?: number | string;
  marginLeft?: number | string;
  marginHorizontal?: number | string;
  marginVertical?: number | string;
  padding?: number | string;
  paddingTop?: number | string;
  paddingRight?: number | string;
  paddingBottom?: number | string;
  paddingLeft?: number | string;
  paddingHorizontal?: number | string;
  paddingVertical?: number | string;

  // Gap
  gap?: number | string;
  rowGap?: number | string;
  columnGap?: number | string;

  // Colors
  color?: string;
  backgroundColor?: string;
  opacity?: number | string;

  // Typography
  fontSize?: number | string;
  fontFamily?: string | string[];
  fontStyle?: 'normal' | 'italic' | 'oblique';
  fontWeight?: FontWeight;
  lineHeight?: number | string;
  letterSpacing?: number | string;
  textAlign?: 'left' | 'right' | 'center' | 'justify';
  textDecoration?: 'line-through' | 'underline' | 'none' | 'line-through underline' | 'underline line-through';
  textDecorationColor?: string;
  textDecorationStyle?: 'dashed' | 'dotted' | 'solid' | string;
  textTransform?: 'capitalize' | 'lowercase' | 'uppercase' | 'upperfirst' | 'none';
  textIndent?: any;
  textOverflow?: 'ellipsis';
  verticalAlign?: 'sub' | 'super';
  direction?: 'ltr' | 'rtl';
  maxLines?: number;

  // Borders
  border?: number | string;
  borderTop?: number | string;
  borderRight?: number | string;
  borderBottom?: number | string;
  borderLeft?: number | string;
  borderColor?: string;
  borderRadius?: number | string;
  borderStyle?: 'dashed' | 'dotted' | 'solid';
  borderWidth?: number | string;
  borderTopColor?: string;
  borderTopStyle?: 'dashed' | 'dotted' | 'solid';
  borderTopWidth?: number | string;
  borderRightColor?: string;
  borderRightStyle?: 'dashed' | 'dotted' | 'solid';
  borderRightWidth?: number | string;
  borderBottomColor?: string;
  borderBottomStyle?: 'dashed' | 'dotted' | 'solid';
  borderBottomWidth?: number | string;
  borderLeftColor?: string;
  borderLeftStyle?: 'dashed' | 'dotted' | 'solid';
  borderLeftWidth?: number | string;
  borderTopLeftRadius?: number | string;
  borderTopRightRadius?: number | string;
  borderBottomRightRadius?: number | string;
  borderBottomLeftRadius?: number | string;

  // Transforms
  transform?: string | Transform[];
  transformOrigin?: number | string;
  transformOriginX?: number | string;
  transformOriginY?: number | string;

  // Object positioning
  objectPosition?: number | string;
  objectPositionX?: number | string;
  objectPositionY?: number | string;
  objectFit?: string;

  // SVG-specific properties
  fill?: string;
  stroke?: string;
  strokeDasharray?: string;
  strokeWidth?: string | number;
  fillOpacity?: string | number;
  fillRule?: 'nonzero' | 'evenodd';
  strokeOpacity?: string | number;
  textAnchor?: 'start' | 'middle' | 'end';
  strokeLinecap?: 'butt' | 'round' | 'square';
  strokeLinejoin?: 'butt' | 'round' | 'square' | 'miter' | 'bevel';
  visibility?: 'visible' | 'hidden' | 'collapse';
  clipPath?: string;
  dominantBaseline?: 'auto' | 'middle' | 'central' | 'hanging' | 'mathematical' | 'text-after-edge' | 'text-before-edge';

  // Media queries
  [key: `@media${string}`]: Style;
}

Transform Types

Transform operations for element positioning and effects.

type Transform =
  | ScaleTransform
  | TranslateTransform
  | RotateTransform
  | SkewTransform
  | MatrixTransform;

interface ScaleTransform {
  operation: 'scale';
  value: [number, number];
}

interface TranslateTransform {
  operation: 'translate';
  value: [number, number];
}

interface RotateTransform {
  operation: 'rotate';
  value: [number];
}

interface SkewTransform {
  operation: 'skew';
  value: [number, number];
}

interface MatrixTransform {
  operation: 'matrix';
  value: [number, number, number, number, number, number];
}

Font System

Font-related types for typography configuration.

// Font weight values
type FontWeight =
  | number
  | 'thin' | 'ultralight' | 'light' | 'normal' | 'medium' 
  | 'semibold' | 'bold' | 'ultrabold' | 'heavy';

// Font style values
type FontStyle = 'normal' | 'italic' | 'oblique';

// Font descriptor for font selection
interface FontDescriptor {
  fontFamily: string;
  fontStyle?: FontStyle;
  fontWeight?: FontWeight;
}

// Emoji source configuration
type EmojiSource = EmojiSourceUrl | EmojiSourceBuilder;

interface EmojiSourceUrl {
  url: string;
  format?: string;
  withVariationSelectors?: boolean;
}

interface EmojiSourceBuilder {
  builder: (code: string) => string;
  withVariationSelectors?: boolean;
}

// Hyphenation callback
type HyphenationCallback = (word: string) => string[];

// Font store for managing fonts
type FontStore = FontStoreType;

Image Handling

Types for handling various image source formats and configurations.

// Main image source type
type SourceObject =
  | Source
  | SourceFactory
  | SourceAsync
  | SourceAsyncFactory;

// Base source types
type Source =
  | SourceURL
  | SourceBuffer
  | SourceBlob
  | SourceDataBuffer
  | SourceURLObject
  | undefined;

type SourceURL = string;
type SourceBuffer = Buffer;
type SourceBlob = Blob;

interface SourceDataBuffer {
  data: Buffer;
  format: 'png' | 'jpg';
}

interface SourceURLObject {
  uri: string;
  method?: HTTPMethod;
  body?: any;
  headers?: any;
  credentials?: 'omit' | 'same-origin' | 'include';
}

// Factory and async types
type SourceFactory = () => Source;
type SourceAsync = Promise<Source>;
type SourceAsyncFactory = () => Promise<Source>;

type HTTPMethod = 'GET' | 'HEAD' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';

SVG Support

SVG presentation attributes for vector graphics styling.

interface SVGPresentationAttributes {
  fill?: string;
  color?: string;
  stroke?: string;
  transform?: string;
  strokeDasharray?: string;
  opacity?: string | number;
  strokeWidth?: string | number;
  fillOpacity?: string | number;
  fillRule?: 'nonzero' | 'evenodd';
  strokeOpacity?: string | number;
  textAnchor?: 'start' | 'middle' | 'end';
  strokeLinecap?: 'butt' | 'round' | 'square';
  strokeLinejoin?: 'butt' | 'round' | 'square' | 'miter' | 'bevel';
  visibility?: 'visible' | 'hidden' | 'collapse';
  clipPath?: string;
  dominantBaseline?:
    | 'auto' | 'middle' | 'central' | 'hanging' | 'mathematical'
    | 'text-after-edge' | 'text-before-edge';
}

Primitive Elements

Enumeration of all available PDF element types.

enum Primitive {
  // Document structure
  Document = 'DOCUMENT',
  Page = 'PAGE',
  
  // Containers
  View = 'VIEW',
  G = 'G', // SVG group
  
  // Text elements
  Text = 'TEXT',
  Tspan = 'TSPAN',
  TextInstance = 'TEXT_INSTANCE',
  
  // Media elements
  Image = 'IMAGE',
  Canvas = 'CANVAS',
  
  // Form elements
  FieldSet = 'FIELD_SET',
  TextInput = 'TEXT_INPUT',
  Select = 'SELECT',
  Checkbox = 'CHECKBOX',
  List = 'LIST',
  
  // SVG shapes
  Svg = 'SVG',
  Path = 'PATH',
  Rect = 'RECT',
  Line = 'LINE',
  Circle = 'CIRCLE',
  Ellipse = 'ELLIPSE',
  Polygon = 'POLYGON',
  Polyline = 'POLYLINE',
  
  // SVG utilities
  ClipPath = 'CLIP_PATH',
  Defs = 'DEFS',
  Stop = 'STOP',
  LinearGradient = 'LINEAR_GRADIENT',
  RadialGradient = 'RADIAL_GRADIENT',
  
  // Interactive elements
  Link = 'LINK',
  Note = 'NOTE'
}

Bookmark System

Types for creating PDF bookmarks and navigation.

type Bookmark = string | ExpandedBookmark;

interface ExpandedBookmark {
  title: string;
  top?: number;
  left?: number;
  zoom?: number;
  fit?: true | false;
  expanded?: true | false;
}

Rendering Context

Low-level rendering context interface for custom drawing operations.

interface Context {
  info: DocumentInfo;
  
  // Document control
  end: () => void;
  
  // State management
  save: () => this;
  restore: () => this;
  
  // Line styling
  lineCap(c: string): this;
  miterLimit(m: any): this;
  lineJoin(j: string): this;
  lineWidth(w: number): this;
  dash(length: number, option: any): this;
  undash(): this;
  
  // Colors and opacity
  fill(color?: ColorValue): this;
  stroke(color?: ColorValue): this;
  fillColor(color: ColorValue, opacity?: number): this;
  strokeColor(color: ColorValue, opacity?: number): this;
  opacity(opacity: number): this;
  fillOpacity(opacity: number): this;
  strokeOpacity(opacity: number): this;
  
  // Path operations
  moveTo(x: number, y: number): this;
  lineTo(x: number, y: number): this;
  quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
  bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
  
  // Shape drawing
  rect(x: number, y: number, w: number, h: number): this;
  roundedRect(x: number, y: number, w: number, h: number, r?: number): this;
  circle(x: number, y: number, radius: number): this;
  ellipse(x: number, y: number, r1: number, r2?: number): this;
  polygon(...points: number[][]): this;
  
  // Page management
  addPage(options?: PageOption): this;
  
  // Image handling
  image(src: any, x?: number, y?: number, options?: ImageOption): Context;
}

interface DocumentInfo {
  Producer?: string;
  Creator?: string;
  CreationDate?: Date;
  Title?: string;
  Author?: string;
  Keywords?: string;
  ModDate?: Date;
}

interface PageOption {
  margin?: number;
  size?: number[] | string;
}

interface ImageOption {
  width?: number;
  height?: number;
}

type ColorValue = string;

Types

All types in this package are TypeScript definition-only and provide no runtime functionality. They are designed to be used with the main react-pdf package for type safety and IntelliSense support in TypeScript projects.

The package re-exports types from three core dependencies:

@react-pdf/font: Font management and typography types
@react-pdf/stylesheet: Comprehensive CSS-like styling system
@react-pdf/primitives: Element type constants and enumerations