V7 interactable Popups

[pequeurb]

I've been looking to upgrade to the V7 version, since I want the cooperative gestures that it introduces, but unfortunately I'm using Popups with DeckGL.
I was hoping there would be a way to make the Popups interactable (hover effects and click events, without touching the map), but I haven't been able to make that work yet.

That was to be expected, as it was mentioned in the RFC that they would no longer work, but also that the relevant code might be moved to a different project.
Do you happen to have any plans for that or somewhere that I can follow up on this?
Or if not, maybe a workaround for my problem?
I would love to use the cooperative gestures, but I can't do it at the cost of losing functionality on my Popups.

[Pessimistress]

I would love to use the cooperative gestures, but I can't do it at the cost of losing functionality on my Popups.

Even when the old Popup component is moved to a different project, you still won't be able to use it with cooperative gestures, because DeckGL is the one handling user input, not the react-map-gl Map.

To use mapbox's event handlers you can look into using deck.gl as a custom layer, or inject the deck.gl canvas into the map container with useControl.

[pequeurb]

I see, I didn't even think about that.
I'll have a look at your suggestions, thank you!

[pequeurb]

@Pessimistress I had a look around for both of your suggestions, but I'm having a bit of trouble wrapping my head around them.
If I look at the link you sent for custom layers, but I see that DeckGL is still wrapped around react-map-gl, so doesn't that mean that DeckGL will still handle the user input?

As for useControl, I figured I might need to use new Deck instead, so I started playing around with it, but I haven't been able to make that work.
I used some examples as a base and this is the mess I've created so far: https://codesandbox.io/s/deck-gl-react-map-gl-eyb9i
I tried adding the deck canvas like you suggested, but I see some errors, since it doesn't have an onAdd/onRemove function and I don't know what they should contain. They are also not rendered on top of each other.
And even if they were rendered on top of each other, how will interacting with them affect both canvas? I feel like I would only be moving the one on top.

I'll leave the reply marked as the answer, since that may very well be it, but I'm hoping you could provide some more guidance or tips for my issue. Or if you're willing, maybe an example of how either would work would help out a lot 🙏

[Pessimistress]

1. If you use @deck.gl/mapbox, you don't need to use the DeckGL React component. Follow examples on https://deck.gl/docs/api-reference/mapbox/mapbox-layer#example.
2. If you use useControl, you would want to use React portal to render DeckGL into a custom container. See https://github.com/visgl/react-map-gl/blob/master/examples/custom-overlay/src/custom-overlay.tsx