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'} />

[artdias90]

any news here?

[nissimscialom]

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'} />

Can it also wrap to several pages?

[hkar19]

Hi, is there any documentation on using @react-pdf/textkit out there, regarding multicolumns?

[trevorallred]

I need this to create a book with two columns on the page. I'm available next week to start work on this. Has anyone else started designing this?

At a high level I'm considering 3 options: 1 - new primitive type called Column 2 - new prop for View called columns 3 - a custom render method for View

I just need 2 columns but I assume we could support multiple with a little extra effort. I also need wrapping across multiple pages to work as expected.

[jimmarshall87]

Would also find this very useful!

[lenardchristopher]

Still would be very useful!

[zdettwiler]

Still interested in this feature!

[sainathaq4]

Still interested in this feature!

[DevTGhosh]

Feature is absolutely needed.