I’m working on a React component where I need to generate a PDF from a specific element referenced by a ref
within a function. However, I’m encountering difficulties targeting the ref
inside the function.
I’m using react-hook-form and I don’t want to use state to manage the field and therefore put the rendered content hidden in the form itself.
The main goal is to create a PDF from the element typed by the user in the form after submitting the form.
Here’s a simplified version of my component:
import { useRef } from 'react';
import generatePDF from 'react-to-pdf';
const MyComponent = () => {
const targetRef = useRef(null);
const defaultValues = {
name: ''
};
const methods = useForm({
resolver: yupResolver(NewPatientSchema),
defaultValues,
});
const {
handleSubmit,
formState: { isSubmitting },
} = methods;
const onSubmit = handleSubmit(async (data) => {
const content = () => {
return (
<div ref={targetRef}>
Content include {data.name}
</div>
)
}
generatePDF(targetRef, { filename: 'page.pdf' });
};
return (
<FormProvider methods={methods} onSubmit={onSubmit}>
<TextField name='name' label='Name'/>
<button onClick={onSubmit}>Generate PDF</button>
</FormProvider>
);
};
export default MyComponent;
So far I get Unable to get the target element.
, I tried also to reference to content and not the ref and I get the same error.
(I tried react-pdf/renderer it does not render the images)
Thank you in advance