i tried this only npm install react-to-print
and created a ComponentToPrint for a div to print and on click of a button to print this div. when i click on print it propmts for a printer to select each time , i am looking for a solution it where i set the default printer for it and it should not ask in propmt, it should directly print that div when we click on print button
import React, { forwardRef } from 'react';
const ComponentToPrint = forwardRef((props, ref) => (
<div ref={ref}>
<h1>This is the content to print</h1>
<p>Print this specific div content.</p>
</div>
));
export default ComponentToPrint;
import React, { useRef } from 'react';
import { useReactToPrint } from 'react-to-print';
import ComponentToPrint from './ComponentToPrint';
const App = () => {
const componentRef = useRef();
const handlePrint = useReactToPrint({
content: () => componentRef.current,
});
return (
<div>
<button onClick={handlePrint}>Print this out!</button>
<ComponentToPrint ref={componentRef} />
</div>
);
};
export default App;
New contributor
Muhammad Qaisar is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2