istarkov / google-map-clustering-example

clustering example for google-map-react
http://istarkov.github.io/google-map-clustering-example/
200 stars 76 forks source link

How to set default center using props? #12

Closed kunokdev closed 7 years ago

kunokdev commented 7 years ago

Let's assume that I called GMap component inside my app like this, passing markers and mapProps from state.


<GMap 
  markers={this.state.mapPins}
  mapProps={{ zoom: 10, center: { lat: this.state.mapPins[0].lat, lng: this.state.mapPins[0].lng } }} 
/>

I removed withState('markers' as you mentioned here: https://github.com/istarkov/google-map-clustering-example/issues/5#issuecomment-263309104

I tried similar pattern here but if I remove onChange handler, then markers don't render.

  withState(
    'mapProps',
    'setMapProps',
    {
      center: susolvkaCoords,
      zoom: 5,
    }
  ),
  // describe events
  withHandlers({
    onChange: ({ setMapProps }) => ({ center, zoom, bounds }) => {
      setMapProps({ center, zoom, bounds })
    },

which is suggested way to pass state data via props to the component like I showed in code on top of post? I am trying to figure out recompose lib, but I have hard time to figure it all out. Can you please show example of that?

kunokdev commented 7 years ago

My current workaround for issue I posted above is to hold my custom state and functions within parent container (in my case Next.js page component) and pass everything as props to the HOCs your example provided. I still kept 'mapProps' state method in the compose chain.

Something like this:

<GMap
  markers={this.state.mapMarkers}
  initialCenter={{ lat: this.state.mapMarkers[0].lat, lng: this.state.mapMarkers[0].lng }}
  fetchHoveredMarkerStaticData={this.fetchHoveredMarkerStaticData.bind(this)}
  currentlyHoveredMarkerData={this.state.currentlyHoveredMarkerData}
/>

and for example for hover function that I passed, I'd use it like this within HOC you provided:

onChildMouseEnter: ({ setHoveredMarkerId, fetchHoveredMarkerStaticData }) => (hoverKey, { id }) => {
      setHoveredMarkerId(id)
      fetchHoveredMarkerStaticData(id)
    },

I hope this might help somebody who isn't very fimilar with HOCs and recompose library like me and if there is better approach that you would suggest, please do.