React-map-gl: Allow string propType for width and height prop

[yangshun]

I'm trying to do a full-screen map and am setting the width and height prop as 100% instead of a number and React's PropType validation warnings are screaming at me. I would like to ask if it makes sense to allow PropType.string as well for the MapGL component?

If you all are agreeable, I can submit a PR to add this.

[vicapow]

Hey @yangshun I think we may want to keep the prop types as numbers with the expectation that users will perform any type casting before passing it to the react-map-gl component. Is this an option in your case? Otherwise, it may be difficult to debug issues where width or height are inadvertently an invalid string like "foobar". For most other DOM nodes, it may make sense for the width or height to be strings like "inherit" or "2em" but supporting this in combination with map overlays may be challenging.

[yangshun]

Thanks for the quick response! I understand where you are coming from. Unfortunately, casting is not an option in my case as my intention is to make the map responsive and I'm not keen to add a window resize listener just to remove a PropType warning which only affects development.

In my opinion, using non-number css height/width values is a pretty common use-case, whereas passing an invalid prop value isn't. I think it is acceptable to allow string values as even if a mistake was made, it is easily debuggable via inspecting the style of the rendered element, and it'll likely be a one-off issue.

Just realized a similar request can be found in https://github.com/uber/react-map-gl/issues/118.

[vicapow]

Ah! I see now.. you want width="X%" etc. so the challenge is we currently require pixel values of width / height to calculate the project / unproject methods used for converting to/from pixels and lng,lat values. We achieve this for our internal apps by creating a seperate component that can take string values for width and height (and possibly other styles) and calculate the pixel width and height values by using getBoundingClientRect. The component then passes that to a renderBlock(width, height) prop callback as part of its didComponentUpdate. The advantage of doing it this way is that we can reuse this technique for all components that require explicit pixel dimensions to render but still need to be responsive

After doing some googling I found https://github.com/digidem/react-dimensions which might be helpful.

In anycase this should be documented better

[yangshun]

@vicapow thanks so much for making the effort in Googling for an alternative solution. That looks great, I'll have a look at it. Closing this issue. Thanks once again! 😄