React-pdf: Support text columns

[diegomura]

OS:
All

React-pdf version:
Lastest

Description:
Add test column layout support. Textkit already supports this

[ghost]

Hi, just curious if this has been/is being implemented. Finding myself in a situation now where I found myself with a _really_ long list that I don't want to continue onto a second page. Want it to wrap into a second column to keep it all on one page.

Maybe there is another way to do this that someone wouldn't mind sharing how they handled it?

[AirborneEagle]

+1
This would be great!

[diegomura]

I’m currently working on a huge refactor and improvement of the text layout that fixes some issues i had with it. So until that’s finished I cannot add this feature to react-pdf, and unfortunately it’s something you cannot achieve right now

[alxhghs]

What would it take to build this feature? Is this something that people could help with? I am looking to dynamically generate PDFs with columns that span multiple pages

[imdevan]

bump

[davidecarpini]

I've used 'original' pdfkit version: ^0.10.0 to build a MULTICOLUMN work-around component:

so just run:
yarn add pdfkit

create the component:

import React, { useRef } from 'react';
import { Canvas } from '@react-pdf/renderer';
import PDFKit from 'pdfkit';

interface Props {
  text: string;
  width: number;
  height: number;
  style?: any;
  options?: any;
}

const MultiColumn: React.FC<Props> = ({
  text,
  width,
  height,
  style = {},
  options = {}
}) => {
  const canvasRef = useRef(null);
  return (
    <Canvas
      debug={true}
      ref={canvasRef}
      style={{ width, height, ...style }}
      paint={() => {
        const document = new PDFKit();
        document.page.content = canvasRef.current.root.instance.page.content;
        document.text(text, 0, 0, {
          width,
          height,
          columns: 2,
          ellipsis: true,
          ...options
        });
        return null;
      }}
    />
  );
};

export default MultiColumn;

and use it like:

<MultiColumn width={300} height={100} text={'here your multi line text'} />