react-leaflet-custom-control - npm Package Compare versions

Comparing version 1.2.4 to 1.2.5

lib/Control.d.ts

@@ -7,4 +7,5 @@ import React from 'react';
     style?: React.CSSProperties;
+    prepend?: boolean;
 }
 declare const Control: (props: Props) => JSX.Element;
 export default Control;

lib/Control.js

@@ -11,13 +11,20 @@ import React from 'react';
 var Control = function (props) {
-    var _a = React.useState(document.createElement('div')), container = _a[0], setContainer = _a[1];
+    var _a = React.useState(document.createElement('div')), portalRoot = _a[0], setPortalRoot = _a[1];
     var positionClass = ((props.position && POSITION_CLASSES[props.position]) || POSITION_CLASSES.topright);
+    var portalContainer = document.createElement('div');
     React.useEffect(function () {
         var targetDiv = document.getElementsByClassName(positionClass);
-        setContainer(targetDiv[0]);
+        setPortalRoot(targetDiv[0]);
     }, [positionClass]);
+    if (props.prepend !== undefined && props.prepend === true) {
+        portalRoot.prepend(portalContainer);
+    }
+    else {
+        portalRoot.append(portalContainer);
+    }
     var controlContainer = (React.createElement("div", { className: 'leaflet-control leaflet-bar', style: props.style }, props.children));
-    L.DomEvent.disableClickPropagation(container);
-    return ReactDOM.createPortal(controlContainer, container);
+    L.DomEvent.disableClickPropagation(portalRoot);
+    return ReactDOM.createPortal(controlContainer, portalContainer);
 };
 export default Control;
 //# sourceMappingURL=Control.js.map

package.json

 {
   "name": "react-leaflet-custom-control",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "Creates a control wrapper around a React element",
@@ -5,0 +5,0 @@ "main": "lib/Control.js",

README.md

@@ -37,3 +37,3 @@ # react-leaflet-custom-control
   />
-  <Control position='topright'>
+  <Control prepend position='topright'>
     <Button color='inherit'> 
@@ -45,3 +45,48 @@ <SearchIcon />
 ```
+## Order Matters!
+Because this uses `React.createPortal` which inherently appends the portal, DOM manipulation is used to append or prepend a container element to the portal target. Because of this, the order of your custom controls matter! The last `Control` element to be prepended to a control position will be at the very top while the last `Control` element to be appended to a control position will be at the very bottom. If mixing with default `React Leaflet` controls, they will be in between your custom controls
 
+### Example
+```jsx
+import { MapContainer, TileLayer, ZoomControl } from 'react-leaflet'
+import Control from 'react-leaflet-custom-control'
+import { Button } from '@mui/material'
+import { 
+  Add as AddIcon,
+  Delete as DeleteIcon,
+  Search as SearchIcon 
+} from '@mui/icons-material'
+import 'leaflet.css'
+
+<MapContainer center={[35.77, -93.34]} zoom={5} zoomControl={false}>
+  <TileLayer
+    attribution="Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community"
+    className="basemap"
+    maxNativeZoom={19}
+    maxZoom={19}
+    subdomains={["clarity"]}
+    url="https://{s}.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
+  />
+  {/* Search control is the very top right control */}
+  <Control prepend position='topright'>
+    <Button color='inherit'> 
+      <SearchIcon />
+    </Button>
+  </Control>
+  <ZoomControl position='topright' />
+  {/* This control will be below the default zoom control */}
+  <Control position='topright'>
+    <Button color='inherit'>
+      <AddIcon />
+    </Button>
+  </Control>
+  {/* This control will be the very bottom control in the position */}
+  <Control position='topright'>
+    <Button color='inherit'>
+      <DeleteIcon />
+    </Button>
+  </Control>
+</MapContainer>
+```
+
 ## Props
@@ -53,1 +98,2 @@ | Name       | Type                                                                 | Default      | Description                        |
 | style?     | `React.CSSProperties`                                                | undefined    | CSS Styles to override the control |
+| prepend?   | boolean                                                              | undefined    | Whether the control should be prepended or appended to the position|

No alert changes

Improved metrics

Total package byte prevSize

11356

31.85%

Lines of code

104

16.85%

Number of lines in readme file

96

88.24%

No dependency changes