Reputation: 763
I have enabled react-to-print
module,
import { useReactToPrint } from "react-to-print";
In the present code from App.jsx
, main-presenter.jsx
is been invoked.
import MainPresenter, {FLOW_PATH, MEMBER_HOME} from './presenters/main-presenter';
And in main-presenter.jsx
, I have code like,
....
export const CONFIRMATION_PATH = '/confirmation';
....
return (
<React.Fragment>
.....
<Route path={CONFIRMATION_PATH} render={() => <SectionPresenter section={confirmationSection} key={confirmationSection} returnToCart={props.returnToCart} openExitModal=
{props.openExitModal}/>}/>
.....
</React.Fragment>
);
How I can intricate this DOM (Route and SectionPresenter) element to place print icon as part of the confirmation page, and for the click, enable the print option.
For printing option, I am referring to the link,- https://www.npmjs.com/package/react-to-print
And the code I have is,
const dataToPrintRef = useRef();
const handlePrint = useReactToPrint({
content: () => dataToPrintRef.current
});
function printModal({ handlePrint }) {
printModal.propTypes = {
handlePrint: PropTypes.func.isRequired
};
return (
<button onClick={handlePrint}>Print</button>
);
}
....
And in order to block the contect for print, we used,
{ cotentTag.propTypes =
ref: dataToPrintRef
};
Upvotes: 0
Views: 136