React-to-print: Trigger does nothing if it returns a React component

[laurpaik]

https://codesandbox.io/s/react-to-print-uhwxj

Heya 👋 see above sandbox
I see you do clone a component at least shallowly https://github.com/gregnb/react-to-print/blob/master/src/index.tsx#L328 --
Is there a way to set a more complex component as the trigger without wrapping in html elements, and if not, could you please update your docs to reflect what the trigger prop supports?

[MatthewHerbst]

Hi, thanks for the question.

I _think_ you can use an arbitrarily complex component already, you just need to pass along the onClick that we provide in the cloned component. Something like:

const MyComponent = (props) => {
  const { onClick } = props; // `onClick` here is coming from `react-to-print`

  return <div onClick={onClick}>Hello World</div>;
}

const SomeComponentWithPrinting = () => {
  // NOTE: do not pas an `onClick` to `MyComponent` below, since `react-to-print` will override it
  return (
    <ReactToPrint
      ...
      trigger={() => <MyComponent />}
    />
  );
}

Does that work? I haven't tried it, but I feel like it _should_.

Regardless, we definitely should document this better. I will work on that in the next couple of days.

[BennettDixon]

Hello! I'm using this in a project and actually just came across this issue. Doing the following like @MatthewHerbst said works for me. I passed all props, but passing just the onClick probably works too although I didn't test that:

import React from 'react'

import * as S from './styles'

const PrintButton = props => <S.PrintIcon {...props} /> // a styled SVG icon

export default PrintButton

Then in the other file:

import React, { useRef } from 'react'
/* I have an index.js file in Components that imports and exports PrintButton as a named const, even though it is default in the last file shown. (I figured I would note this for anyone who is just copying and pasting) */
import { PrintButton } from 'app/components' 

const Test = (props) => {
    const printReference = useRef(null)

    return  (
        <>
            <p ref={printReference}>Print me</p>
            <ReactToPrint trigger={() => <PrintButton />} content={() => printReference.current} />
        </>
    )
}