CODEWITHSUNDEEP
reactjstypescriptreact-to-print
Stykgwar
Stykgwar

Reputation: 721

How can I print without rendering it using react-to-print?

Is it possible to use react-to-print without rendering the details to the ui? What i'm trying to do is create a print button without rendering the other details coming from child component.

ParentComponent.tsx

return (
   <FormToPrint form={form} />
)

ChildComponent.tsx

interface FinalizeFormProps {
  form: UseFormReturn<any>; // Replace 'any' with your specific form data type
}


const FormToPrint = ({ form }: FinalizeFormProps) => {
  const contentRef = useRef<HTMLDivElement>(null);
  const reactToPrintFn = useReactToPrint({
    contentRef
  });



  return (
    <>
      <div ref={contentRef} >
      <p className="text-sm font-bold">Print this but don't show to the UI</p>

      </div>
      <Button type="button"
        className="mb-5"
        //@ts-ignore
        onClick={reactToPrintFn}>
        Print Form
      </Button>
    </>
  )
}

export default FormToPrint

Currently this is what happens. It shows the UI

enter image description here enter image description here

but when I add a hidden the className. It disappear which is not what I want.

Upvotes: 0

Views: 197

Answers (1)

Nsubis Genesis
Nsubis Genesis

Reputation: 1

You could try adding a wrapping div, and make that hidden instead. This way when you print the component/node of interest, it does not get hidden as the styles you apply on the component to print style your print-out.

For example (also see Package documentation);

<div className="hidden">
    <div ref={contentRef} >
        <p className="text-sm font-bold">
            Print this but don't show to the UI
        </p>
    </div>
</div>

Upvotes: 0

Related Questions