Export a method to trigger print about react-to-print HOT 11 CLOSED

For me works!

this

manualPrint() {

this.printRef.handlePrint();

}

render(){
<ReactToPrint
ref={el => (this.printRef = el)}
trigger={() => Imprimir}
content={() => this.componentRef}
/>

......

from react-to-print.

Do you mean without using the React component at all? Right now you can do:

render() {
  componentDidMount() {
    this.ref.handlePrint();
  }

  return (
        <ReactToPrint
          ...
          ref={ref => this.ref = ref}
        />
  );
}

I'd be interested in moving the print API outside of the component itself. How do you imagine setting up target in your example?

from react-to-print.

Do you mean without using the React component at all? Right now you can do:

render() {
  componentDidMount() {
    this.ref.handlePrint();
  }

  return (
        <ReactToPrint
          ...
          ref={ref => this.ref = ref}
        />
  );
}

I'd be interested in moving the print API outside of the component itself. How do you imagine setting up target in your example?

target is a ref or domNode

from react-to-print.

东西是好东西,但是貌似我这个项目用不了,我照着上面来做了,但是样式貌似没有打印出来,无论怎么说还是辛苦啦,点一个星,不成敬意

from react-to-print.

from react-to-print.

Thanks for the info :) It would be great if this were documented, though.

Also, any chance of making the trigger() function optional? :)

from react-to-print.

I'm currently having a similar issue. I'm currently using material-table and would like to have a button that you click that will print the info contained passed into a component.

My code looks like this -

constructor(props) {
    super(props);

    this.state = {
      orderLoaded: false,
      orderData: []
    };
    this.printRef = React.createRef();

  }

onClick: (event, rowData) => {
    this.setState({ orderData: rowData })
    this.setState ({ orderLoaded: true })
    this.printRef.handlePrint();
}

Then i have

{this.state.orderLoaded ? 
  <div>
    <ReactToPrint
       ref={el => (this.printRef = el)}
       trigger={this.state.orderLoaded = true}
       content={() => this.componentRef}
     />
     <AssemblyList
       selectedOrder={this.state.orderData}
       ref={el => (this.componentRef = el)} />
   </div>
        : 
  <div />
} 

i'm getting an error that says

Uncaught TypeError: _this2.printRef.handlePrint is not a function
and
Uncaught TypeError: e is not a function

any ideas?

from react-to-print.

@heyjaypray we don't have a feature available yet where you can call that method directly. Something I've been meaning to work on. I'll also happily accept any PRs :)

from react-to-print.

We have had the ability to useReactToPrint for some time now 😄

from react-to-print.

did you found solution for #68 (comment)?
cause i have same problem

from react-to-print.

@Hamza-Wakrim I think you should be using the useReactToPrint() function 🙂

from react-to-print.