You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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?
The text was updated successfully, but these errors were encountered:
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:
constMyComponent=(props)=>{const{ onClick }=props;// `onClick` here is coming from `react-to-print`return<divonClick={onClick}>Hello World</div>;}constSomeComponentWithPrinting=()=>{// NOTE: do not pas an `onClick` to `MyComponent` below, since `react-to-print` will override itreturn(<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.
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:
importReactfrom'react'import*asSfrom'./styles'constPrintButton=props=><S.PrintIcon{...props}/>// a styled SVG iconexportdefaultPrintButton
Then in the other file:
importReact,{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'constTest=(props)=>{constprintReference=useRef(null)return(<><pref={printReference}>Print me</p><ReactToPrinttrigger={()=><PrintButton/>}content={()=>printReference.current}/></>)}
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?
The text was updated successfully, but these errors were encountered: