0

So my use case is that I am using Preact and TypeScript, and I want to add OpenSeadragon to my application and I want to use Overlays feature of it.

Currently I am using it like this to add an overlay:

        const overlayElement = document.createElement("div")


        const location = new OpenSeaDragon.Point(0, 0);
        viewer.addOverlay({
            element: overlayElement,
            location: location,
            // placement: OpenSeaDragon.Placement.TOP_LEFT,
            checkResize: false, // Set to true if overlay should resize with viewer
        });

But I wonder if I am doing something wrong with using document.createElement() since it's creating a DOM node outside of the tree.

If I use createElement() from Preact, TypeScript complains about the fact that it's not of type HTMLElement:

Type 'VNode<(ClassAttributes<HTMLElement> & { id: string; }) | null>' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 285 more.ts(2740)

I wonder if it is counted as the best practice going with document.createElement() solution. And if so, is there something that I should be aware of, such as removing the element when the component is unmounted?

Any ideas and suggestions are very appreciated, thanks in advance!

Kerem Nayman
  • 137
  • 1
  • 8
  • Typically you'd let Preact handle the creation of the element and you'd reference it using a [ref](https://preactjs.com/guide/v10/refs/). Is this any particular reason you're deciding not to use a ref? – Wing Aug 18 '23 at 17:08
  • I can't add `ref` to `document.createElement()`. I can add it to a raw HTML such as `const overlayElement =
    hey
    ` but then TypeScript complains again about the fact that it's not an `HTMLElement`.     – Kerem Nayman Aug 18 '23 at 17:22
  • Please double check the documentation on how to use a ref because neither of those are the way to do it. In short you need to: create a ref and assign it to a variable (`const ref = createRef();`); reference the variable in the ref prop of the element (`
    ...
    `); reference the variable as the `element` property of the object passed to `viewer.addOverlay` (`viewer.addOverlay({ element: ref })`).     – Wing Aug 18 '23 at 17:29
  • Thank you for your time! However, I am still getting the same type error if I pass the ref object itself to the function: `Argument of type 'RefObject' is not assignable to parameter of type 'string | HTMLElement | OverlayOptions'.` – Kerem Nayman Aug 18 '23 at 17:33
  • Probably needs to be `ref.current`. – Wing Aug 18 '23 at 17:39
  • I'm going to suggest closing as a duplicate of [How to access a DOM element in React? What is the equilvalent of document.getElementById() in React](https://stackoverflow.com/questions/38093760/how-to-access-a-dom-element-in-react-what-is-the-equilvalent-of-document-getele). If the things in our convo worked, please accept the duplicate closure. – Wing Aug 18 '23 at 17:40
  • No sorry, if I use `ref.current` directly to the overlay function, it doesn't pick up the element. Please try to reproduce the flow on your end. – Kerem Nayman Aug 18 '23 at 19:14
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/254961/discussion-between-wing-and-kerem-nayman). – Wing Aug 18 '23 at 20:11

0 Answers0