CODEWITHSUNDEEP
javascriptreactjsmapboxreact-map-gldeck.gl
karl
karl

Reputation: 69

DeckGL with React – JSX wrapper component for Map

I'm using DeckGL with React + Typescript and I'm looking to find a way to create a wrapper component for the Map component from react-map-gl to handle its own functionalities.

Currently I have an implementation working, but the Map component has to be a direct child of DeckGL, like so:

const App = () => {
  return (
    <DeckGL ...>
      <Map .../>
    </DeckGL>
}

However, what I'd like to achieve is taking the Map component in a separate file where a props could be passed and state could be handled:

MapWrapper.tsx

const MapWrapper = (props) => {
  // Handle state here, perhaps make use of useEffect()
  return <Map .../>
}

App.tsx

import MapWrapper from "./MapWrapper"
const App = () => {
  return (
    <DeckGL ...>
      <MapWrapper .../>
    </DeckGL>
}

The caveat stated here says JSX layers of deckgl are converted to object instances as they are not true React components, however I'm not sure if the same is true for the Map component from react-map-gl.

I appreciate any help, thanks!

Upvotes: 1

Views: 337

Answers (1)

Niki
Niki

Reputation: 66

i think the Map Component actually depends on the DeckGL Component. So a workaround could be to make a wrapper Component for the DeckGL Component. Then you have a component where you can handle state and props.

so something like this:

<Wrapper ...>
  <DeckGL ...>
    <Map .../>
  </DeckGL>
</Wrapper>

Upvotes: 0

Related Questions