Accessing the ref somehow in the options

[Gusis93]

Description

I would like to have access to the ref to be able to use it for whatever reason I might need.

Problem Statement/Justification

With html-to-image you declare the ref and use that to give the toXXX method the node you want to create the image from. Which means you can use the ref in the options for example for the size (ex: bubkoo/html-to-image#43)

With the hooks, the ref is created inside the hook which means we don't get access to it

Proposed Solution or API

An idea might be to instead of accepting options as a param, accept a function that returns the option object.

const [_, convert, ref] = useToPng<HTMLDivElement>((ref) => ({
    onSuccess: data => {
      const link = document.createElement('a');
      link.download = 'my-image-name.png';
      link.href = data;
      link.click();
    },
    width: ref.current?.scrollWidth + 40,
    height: ref.current?.scrollHeight + 40,
  }))

Another option is that the ref is sent as a param instead of created in the hook.

const ref = useRef();
const [_, convert] = useToPng<HTMLDivElement>(ref, {
    onSuccess: data => {
      const link = document.createElement('a');
      link.download = 'my-image-name.png';
      link.href = data;
      link.click();
    },
    width: ref.current?.scrollWidth + 40,
    height: ref.current?.scrollHeight + 40,
  })

Alternatives

No response

Additional Information

Thank you for the utilities!

[hugocxl]

Hi @Gusis93, the last parameter returned by the hook is actually a function to be called with the ref of the component as argument, meaning that you can access it before:

const [_, convert, getRef] = useToPng<HTMLDivElement>()

return ( 
   <div ref={ref => getRef(ref) />
)

Let me know if that works out for you.