The size of the Popup does not change with the content in react Leaflet

Use leaflet in react through react leaflet. When dynamically modifying the popup content, it is found that the size (width and height) of the popup does not change with the modified content.

problem

There is a default small size Popup, which contains a button. After clicking the button, the content in the Popup will be replaced with large size content.

The brief logic is as follows:

 <Popup> {this.state.fullBtnClicked ?  bigContent : smallContent} </Popup>

After replacing the content, it is found that the size of the Popup has not increased.

Try adding minWidth / maxWidth Properties:

 <Popup maxWidth={this.state.fullBtnClicked?   bigMaxSize: smallMaxSize} minWidth={this.state.fullBtnClicked?  bigMinSize : smallMinSize} > {this.state.fullBtnClicked ?  bigContent : smallContent} </Popup>

After the content is replaced, the size of the Popup is still not larger, and the leaflet still uses the initial minWidth / maxWidth 。

reason

Leaflet will add a width = xxx Style (Height is the same but slightly different).

The calculation method can be found in the _updateLayout Medium:

 style.width = ''; style.whiteSpace = 'nowrap'; var width = container.offsetWidth; width = Math.min(width,  this.options.maxWidth); width = Math.max(width,  this.options.minWidth); style.width = (width + 1) + 'px'; style.whiteSpace = ''; style.height = ''; var height = container.offsetHeight, maxHeight = this.options.maxHeight, scrolledClass = 'leaflet-popup-scrolled'; if (maxHeight && height > maxHeight) { style.height = maxHeight + 'px'; DomUtil.addClass(container, scrolledClass); } else { DomUtil.removeClass(container, scrolledClass); }

The most important one is this. options.

After tracing all the way, we found that the path of options is:

[@react-leaflet]SomeWork
- [react-leaflet]createDivOverlayComponent.createOverlayComponent
  - [leaflet]new Popup(props,ref)
    - [leaflet]popup.initialize(props,ref)
      - [leaflet]options = props

The problem is clear:

Leaflet is a traditional js package, not a React component.
React leaflet sets a React empty shell for leaflet. The contents of the shell are actually leaflet and its Dom.
When props change, react laflet only listens for and updates position, but does not update className, minWidth and other attributes.

Of course, I am not a professional web front-end.

resolvent

Method 0: Use my modified react leaf

take package.json The dependency in is modified to my transferred package:

 "dependencies":{ "react-leaflet": "npm:@azimiao/react-leaflet" }

Method 1: Change the react leaf

Modify Popup.tsx to listen minWidth / maxWidth Change to update the options value in the leaflet and recalculate the layout:

 function usePopupLifecycle( element: LeafletElement<LeafletPopup>, context: LeafletContextInterface, //Zimiao haunts (azimiao. com), modify 1, add width/height { position,  minWidth, maxWidth, maxHeight }, setOpen: SetOpenFunc, ) { //The previous code is omitted //Zimiao haunts (azimiao. com) Modify 2, monitor changes const firstUpdate = useRef(true) useLayoutEffect(() => { if (firstUpdate.current) { firstUpdate.current = false return } const { instance } = element if (minWidth !=  null) { instance.options.minWidth = minWidth } if (maxWidth !=  null) { instance.options.maxWidth = maxWidth } if (maxHeight !=  null) { instance.options.maxHeight = maxHeight } instance.update() }, [element,  minWidth, maxWidth, maxHeight]) }

Method 2: Bugs are features

Through props minWidth Pass a value of string type (such as auto ）When Popup calculates layout, an error result (NaN) will appear, and the style assigned to it will be meaningless.

Use CSS to limit the content size and control the window size.

Method 3: Change leaflet

modify _updateLayout Method, in minWidth / maxWidth If it is string or null, the style is not set. By default, it can be expanded by child.

The window size is also controlled by restricting the content size through CSS.

Although I am not a professional front-end, I recommend using method 1.