Adjust page size in ReactToPrint

Question

I am using ReactToPrint library to print a section of my page using React.js.

<ReactToPrint
  trigger={() => (
    <Button
      variant="contained"
      color="primary"
      className={classes.button}
    >
      PRINT &nbsp;&nbsp;&nbsp;
      <PrintIcon
        className={classNames(classes.leftIcon, classes.iconSmall)}
      />
    </Button>
  )}
  content={() => this.componentRef}
/>
<Barcode
  ref={el => (this.componentRef = el)} 
  name={this.state.displayValue}
  value={this.state.barcodeValue}
  text={this.state.displayValue}
  fontSize={20}
  width={2}
/>

I can see pageStyle property in the GitHub documentation but I cannot find how to use it. Can someone please help me set the size to something like 2.5 x 4 inches?

Answer 1

Not sure if you're still having this issue, but try

pageStyle="@page { size: 2.5in 4in }"

within your ReactToPrint. This would adjust your print template page size.

Answer 2

export function styledPdf() {
  const pageStyle = `{ size: 2.5in 4in }`;
  const divPrint = React.useRef(null);

  return (
    <Div ref={divPrint}>
      <ReactToPrint
        pageStyle={pageStyle}
        trigger={() => <button>Print this out!</button>}
        content={() => divPrint.current}
      />
    </Div>
  );
}

Answer 3

if pageStyle prop of react-to-print isn't working properly you can try this.

  const pageStyle ="
  @page {
    size: A4 landscape;
  }
";

and add to style tag

 <div id="item-detail-print">
    <style>{pageStyle}</style>
      <Barcode
       value={data?.itemById.barCode}
       ref={componentRef}  />
 </div>