[ENHANCEMENT]: Set content function lazily to the handlePrint function returned by the useReactToPrint() hook

[isocroft]

This is a feature enhancement request and i hope you would consider its' merits fairly.

I would like to have the content function set after the useReactToPrint() hook is initialised can called like so:

import { useRef, useMemo } from "react";
import { useReactToPrint } from "react-to-print";


/* @NOTE: `navigator.clipboard` is undefined in Safari 12.1.x as well as the earlier versions 
  of other browsers like Chrome (Webkit), Firefox, Edge (EdgeHTML) */
/* @CHECK: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#clipboard_availability */
import "clipboard-polyfill/overwrite-globals"; /* @_SHIM: # */

/**
 * copyTextFactory
 *
 * @param {void}
 * @returns {void}
 */
function copyTextFactory() {
  return (textString = "") => {
    /* @NOTE: `navigator.clipboard.writeText(...)` throws vague error in Safari 13.1.x (and above) even when called in a real user context */
    /* @CHECK: https://developer.apple.com/forums/thread/691873 */
    try {
      navigator.clipboard.writeText(textString);
    } catch(_) { }
  };
}

/**
 * printPageFactory
 *
 * @param {Function} printer
 * @returns {void}
 */
function printPageFactory(printer) {
  return (componentRef = null) => {
     if (componentRef === null) {
        window.print();
     } else {
       /* @TODO: I need `content` to optionally be passed to the `handlePrint` function */
       printer(null, () => componentRef.current)
     }
  };
}

/* @NOTE: A ReactJS hook to house command design pattern actions for copying, printing e.t.c on a React app */
export const useCommands = () => {
  /* @HINT: COMMAND PATTERN */

  const printer = useReactToPrint();
  const commands = useRef({
    copy: copyTextFactory(),
    print: printPageFactory(printer)
  }).current;

  return useMemo(
    () => ({
      hub: {
        execute(commandName = "", ...args) {
          if (typeof commands[commandName] === "function") {
            const commandRoutine = commands[commandName];
            return commandRoutine.apply(null, args);
          }
        }
      }
    }),
    /* eslint-disable-next-line react-hooks/exhaustive-deps */
    []
  );
};

I could ready a PR soon if you accept this enhancement request and you don't mind (since it's a small change)

[MatthewHerbst]

Hello. Apologies for the very delayed response on this. Could you better explain what you are trying to do that you can't do today?

[isocroft]

Hello @MatthewHerbst , Here is what i am trying to do:

After making this call to the hook:

const printer = useReactToPrint();

I need to be able to optionally pass the componentToPrintRef. to the printer() function like so:

/* @HINT: I need `content` to optionally be passed to the `handlePrint` function */
printer({ content: () => componentToPrintRef });

[MatthewHerbst]

Ah, I see. Adding this should be doable. I probably can't get around to it until the weekend at the earliest, probably more likely over the Christmas break. Always happy to review/accept PRs too 😄

[isocroft]

Thanks a lot @MatthewHerbst . I will be creating a PR in two days time for this.

[isocroft]

Hey @MatthewHerbst , as discussed earlier, the PR for this issue is ready for your review

[isocroft]

Hello @MatthewHerbst , i have updated the PR based on your review. It is ready for another review or approval.

Thanks 🙏🏾

[isocroft]

Hello @MatthewHerbst , i have updated the PR based on your last review.

Thanks 🙏🏾

[isocroft]

Hello @MatthewHerbst , just a small reminder.

[MatthewHerbst]

Nice! Merged it in, will get a release out with it either tonight or tomorrow. Thank you for all of your work on this!