Make react-leaflet map component resize itself to fit available space - react-leaflet

Question

Setting the width of the Map component works, but height seems to only respond to an absolute size in pixels.
Is it possible to make the map control automatically consume available space inside the parent element?

Answer 1

I was able to create a component that passed in a component state value for the height of the map. I created a helper function that would resize the height to make it all responsive.
...
export default class MapContainer extends React.Component {
updateDimensions() {
const height = window.innerWidth >= 992 ? window.innerHeight : 400
this.setState({ height: height })
}
componentWillMount() {
this.updateDimensions()
}
componentDidMount() {
window.addEventListener("resize", this.updateDimensions.bind(this))
}
componentWillUnmount() {
window.removeEventListener("resize", this.updateDimensions.bind(this))
}
...
render() {
...
return (
<div class="map-container" style={{ height: this.state.height }}>
<Map>
...
</Map>
</div>
)
}
}

Answer 2

I solved this by using the react-container-dimensions component, which passes width/height as props to its child:
<div className="div that can resize""
ContainerDimensions>
<MyMapContainer/>
</ContainerDimensions>
</div>
...
style.width = Math.floor(this.props.width);
return (
<Map style={style}

Answer 3

Setting min-height & height to 100% on MapContainer worked form me:
<div style={{ height: "175px" }}><MapContainer style={{ height: "100%", minHeight: "100%" }} ...</div>

Answer 4

I solved this by setting the height of leaflet-container to 100% in my .css file.
.leaflet-container {
height: 100%;
}
With my Map component looking like this:
const Map = () => {
return (
<MapContainer center={[51.4381, 5.4752]} zoom={10} >
<TileLayer
maxZoom='20'
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</MapContainer>
)
}
export default Map;