useMapContext is undefined

[jesuissuyaa]

I am using react-simple-maps v.3.0.0

When I use useMapContext() as instructed in the document, I am getting undefined.

Cannot destructure property 'projection' of 'useMapContext(...)' as it is undefined.

import {
  ComposableMap,
  Geographies,
  Geography,
  Marker,
  ZoomableGroup,
  useMapContext,
} from "react-simple-maps"

// ...

const MyMap = () => {
  const { projection } = useMapContext() // crashes dev app here

  // ...
  return (
      <ComposableMap ... >
      <ZoomableGroup>
        <Geographies geography={geoURL}>
        ...
   )
}

Are there any prerequisites to use this hook?

[csabat]

Since ComposableMap has the Provider, I think this hook should only be used in components wrapped with ComposableMap.

[Araz0]

trying to import any hook from react-simple-maps seems to not work. trying to import "useGeographies" for exmaple returns the following:

import {
  ComposableMap,
  Geographies,
  Geography,
  ZoomableGroup,
  useGeographies // react-simple-maps" has no exported member named useGeographies
} from 'react-simple-maps'

[Phenelo]

If anyone is looking for a solution to this... As @csabat said, for you to be able to use useGeographies, you need to use the hook in a component that is wrapped in ComposableMap:

// custom component that uses the hook
export default function CustomGeographies() {
  const { geographies } = useGeographies({ geography: "/pathtogeojson" });

  return (
    <>
      {geographies.map((geo) => (
        <Geography key={geo.rsmKey} geography={geo} />
      ))}
    </>
  )
}

// main map component
export default function Map() {
  return (
    <ComposableMap projection="geoMercator">
      <CustomGeographies/>
    </ComposableMap>
  )
}

[piercemorris]

trying to import any hook from react-simple-maps seems to not work. trying to import "useGeographies" for exmaple returns the following:

import {
  ComposableMap,
  Geographies,
  Geography,
  ZoomableGroup,
  useGeographies // react-simple-maps" has no exported member named useGeographies
} from 'react-simple-maps'

This package is built using JavaScript, thus the types are derived from the DefinitelyTyped package. As I did some investigation, the type file for this package is incomplete and I am currently working on a fix to add some missing types to the hooks.