How to use @react-pdf/textkit - 9 common examples

renderText() {
    const { top, left } = this.getAbsoluteLayout();
    const initialY = this.lines[0] ? this.lines[0].box.y : 0;

    // We translate lines based on Yoga container
    this.root.instance.save();
    this.root.instance.translate(
      left + this.padding.left,
      top + this.padding.top - initialY,
    );
    // Perform actual text rendering on document
    PDFRenderer.render(this.root.instance, [this.lines]);
    setLink(this);
    setDestination(this)


    this.root.instance.restore();
  }
  async render() {

const renderText = (ctx, node) => {
  const { top, left } = node.box;
  const paddingTop = R.pathOr(0, ['box', 'paddingTop'], node);
  const paddingLeft = R.pathOr(0, ['box', 'paddingLeft'], node);
  const initialY = node.lines[0] ? node.lines[0].box.y : 0;

  ctx.save();
  ctx.translate(left + paddingLeft, top + paddingTop - initialY);

  PDFRenderer.render(ctx, [node.lines]);
  ctx.restore();

  return node;
};

export const getAttributedString = instance => {
  return AttributedString.fromFragments(getFragments(instance));
};

const getAttributedString = instance =>
  AttributedString.fromFragments(getFragments(instance));

const renderSpan = (ctx, line, textAnchor) => {
  ctx.save();

  const x = R.pathOr(0, ['box', 'x'], line);
  const y = R.pathOr(0, ['box', 'y'], line);
  const width = lineWidth(line);

  switch (textAnchor) {
    case 'middle':
      ctx.translate(x - width / 2, y);
      break;
    case 'end':
      ctx.translate(x - width, y);
      break;
    default:
      ctx.translate(x, y);
      break;
  }

  for (const run of line.runs) {
    renderRun(ctx, run);
  }

import textDecoration from '@react-pdf/textkit/engines/textDecoration';
import scriptItemizer from '@react-pdf/textkit/engines/scriptItemizer';
import wordHyphenation from '@react-pdf/textkit/engines/wordHyphenation';

import fontSubstitution from './fontSubstitution';

const engines = {
  linebreaker,
  justification,
  textDecoration,
  scriptItemizer,
  wordHyphenation,
  fontSubstitution,
};

const engine = layoutEngine(engines);

export default engine;

import Font from '../font';
import transformText from '../text/transformText';
import isTextInstance from '../node/isTextInstance';
import fontSubstitution from '../text/fontSubstitution';

const engines = {
  linebreaker,
  justification,
  textDecoration,
  scriptItemizer,
  wordHyphenation,
  fontSubstitution,
};

const engine = layoutEngine(engines);

const layoutOptions = {
  hyphenationCallback: Font.getHyphenationCallback(),
  shrinkWhitespaceFactor: { before: -0.5, after: -0.5 },
};

const getFragments = instance => {
  if (!instance) return [{ string: '' }];

  const fragments = [];

  const {
    fill = 'black',
    fontFamily = 'Helvetica',
    fontWeight,
    fontStyle,

      ...this.lines.map(line => AttributedString.advanceWidth(line)),
    );

const renderRun = (ctx, run) => {
  const runAdvanceWidth = runWidth(run);
  const { font, fontSize, color, opacity } = run.attributes;

  ctx.fillColor(color);
  ctx.fillOpacity(opacity);

  if (font.sbix || (font.COLR && font.CPAL)) {
    ctx.save();
    ctx.translate(0, -run.ascent);

    for (let i = 0; i < run.glyphs.length; i++) {
      const position = run.positions[i];
      const glyph = run.glyphs[i];

      ctx.save();
      ctx.translate(position.xOffset, position.yOffset);