Dev Anand Sadasivam
Dev Anand Sadasivam

Reputation: 763

How to enable print in React application where page rendered as section under <Route>

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

Answers (0)

Related Questions