Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessing the ref somehow in the options #102

Open
Gusis93 opened this issue May 2, 2024 · 0 comments
Open

Accessing the ref somehow in the options #102

Gusis93 opened this issue May 2, 2024 · 0 comments

Comments

@Gusis93
Copy link

Gusis93 commented May 2, 2024

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant