-
-
Notifications
You must be signed in to change notification settings - Fork 219
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Refs are not available for stateless components. For 'react-to-print' to work only Class based components can be printed #96
Comments
What part of that error message do you need help with? |
This's an alternative for stateless component: import React, { useRef } from 'react';
import ReactToPrint from 'react-to-print';
class ComponentToPrint extends React.PureComponent {
render() {
return (
<table>
<thead>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</thead>
<tbody>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
</tr>
</tbody>
</table>
);
}
}
const Example = () => {
const componentRef = useRef();
return (
<div>
<ReactToPrint
trigger={() => <button>Print this out!</button>}
content={() => componentRef.current}
/>
<ComponentToPrint ref={componentRef} />
</div>
);
};
export default Example; |
@andydev404 hooks 💯 |
Something worth noting: the component you want to print will still need to be a class component. If Example AND ComponentToPrint are both non-class-based, it won't work. I had trouble with this this morning, where in my example, Example was a functional, stateless component and ComponentToPrint was also a functional, stateless component. I kept getting this Turned out that wasn't good enough. It's not necessarily that it's a stateless component. It's that it's not a class based component. Interestingly, in my wrestling with this, I tried |
Thanks for the information @MarkNewcomb1 we may need to update our error messages in the hooks world, since previously a functional component had no effective way of maintaining state. |
Add my thanks to @MarkNewcomb1. The above information is useful. I met the same problem to print non-class-based component and I finally got it to work by putting the component as the child of |
If one wants to just have functional components, they can refer to the below example: import React, { useRef } from "react";
import ReactToPrint from "react-to-print";
const ComponentToPrint = React.forwardRef((props, ref) => (
<table ref={ref}>
<thead>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</thead>
<tbody>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
</tr>
</tbody>
</table>
));
const Example = () => {
const componentRef = useRef();
return (
<div>
<ReactToPrint
trigger={() => <a href="#">Print this out!</a>}
content={() => componentRef.current}
/>
<ComponentToPrint ref={componentRef} />
</div>
);
}
export default Example; |
I got the correct answer with the following solution and bypassed this error import React, { useRef } from "react";
import ReactToPrint from "react-to-print";
export default function PrinterWrapper({ children }) {
const linkToPrint = () => {
return (
<button>Click To PrintOF Body</button>
)
}
const componentRef = useRef();
return (
<>
<ReactToPrint trigger={linkToPrint} content={() => componentRef.current} />
<div ref={componentRef}>
{children}
</div>
</>
);
} |
I followed the examples given and still get the error message. Could it be because the wrapped component has some stateless components in it? |
can someone help me how to trigger an event if success printing or not using useReactToPrint |
@JasonCabral131 As called out in the README, unfortunately the |
The error message for trying to print a non-Class based component was a little confusing, since part of it implied that maybe using `useState` hook could solve it, but it cannot. This was brough up in [96](MatthewHerbst/react-to-print#96)
No description provided.
The text was updated successfully, but these errors were encountered: