How can I print an page with react-to-print

Question

I need a print button on my form. I was doing an research for a library to do that, and I found this one:

https://www.npmjs.com/package/react-to-print

I was thinking about this flow: a component import and add a line in my code to call that component, and the print button works well, but as I understand it this component needs me to pass the component to be printed in full.

I tried to do this, but I got this error:

  Attempted import error: './index' does not contain a standard export (imported as 'FormContent').

my index code:

const App = () => {
    let numb_days = 22
    return (
        <div className="m-4">
            <FormField label="Salário Base" show_small_text="false" numb_days={ numb_days }/>
            <hr />
            <h6 className="mb-4"> Qtd. dias úteis: { numb_days } </h6>
            <FormField label="Auxilio Refeição" show_small_text="true" numb_days={ numb_days }/>
            <FormField label="Auxilio Alimentação" show_small_text="true" numb_days={ numb_days }/>
            <FormField label="Plano de Saúde" show_small_text="false" numb_days={ numb_days }/>
            <FormField label="Outros Benefìcios (VT)" show_small_text="true" numb_days={ numb_days }/>
            <ComponentToPrint ref={(el) => (this.componentRef = el)} />
        </div>
    );
};

my componente code:

import React, { Component } from "react";
import FormContent from "./index";

class ComponentToPrint extends Component {
  render() {
    return <FormContent ref={(el) => (this.componentRef = el)} />;
  }
}

export default ComponentToPrint;

I think I must be making a big mistake, but I don't understand how I'm going to pass my index on to this component and call my index at the same time.

I found this example: https://codesandbox.io/s/interesting-cookies-k1bg9?file=/src/deliverySheet/ComponentToPrint.js

it looks like I need to follow the flow:

index -> print (my content).

but why couldn’t I do that? ->

index -> my content (print)

or

index -> my content AND print

score 1 · Answer 1 · answered Feb 23 '21 at 14:38

I'm not really sure I understand your question but I'm going to try to answer it, the examples you gave is really hard to read because of all of the subfolders. Basicly what you need to do to print whit react to print is make a normal component and reference it on the same level. I see you use class components, so im just going to copy and paste from the react-to-print docs.

import React from 'react';
import ReactToPrint from 'react-to-print';

import { ComponentToPrint } from './ComponentToPrint';

class Example extends React.PureComponent {
  render() {
    return (
      <div>
        <ReactToPrint
          trigger={() => {
            // NOTE: could just as easily return <SomeComponent />. Do NOT pass an `onClick` prop
            // to the root node of the returned component as it will be overwritten.
            return <a href="#">Print this out!</a>;
          }}
          content={() => this.componentRef}
        />
        <ComponentToPrint ref={el => (this.componentRef = el)} />
      </div>
    );
  }
}

Where it says "trigger" is where you render your button. I hope that helped.

How can I print an page with react-to-print

1 Answers1