feat: add clean map callback

- cleanMapApi optional callback
- update container element type

README.md

@@ -122,13 +122,15 @@ export default WithoutTokenMap
 
 - **container** - The HTML element `React` `ref` in which Mapbox GL JS will render the map
 - **options** *(optional)* - object with native [mapbox-gl](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters) parameters, without container prop
-- **setMapApi** *(optional)* - map load callback, called when [mapbox-gl load event](https://docs.mapbox.com/mapbox-gl-js/api/map/#map.event:load) is fired
+- **setMapApi** *(optional)* - map load callback, called when the [mapbox-gl load event] (https://docs.mapbox.com/mapbox-gl-js/api/map/#map.event:load) occurs
+- **cleanMapApi** *(optional)* - map cleanup callback, called when the map container is unmounted
 
 ```ts
 useMapboxGl(
-  container: React.MutableRefObject<HTMLDivElement> 
+  container: React.MutableRefObject<HTMLElement> 
   options?: Omit<MapboxOptions, "container">
   setMapApi?: (map: mapboxgl.Map) => void 
+  cleanMapAPI?: () => void
 )
 ```
 

src/use-mapbox-gl.ts

@@ -10,9 +10,10 @@ export const defaultMapOptions: MapOptions = {
 };
 
 export function useMapboxGl(
-  cotainerRef: React.MutableRefObject<HTMLDivElement>,
+  cotainerRef: React.MutableRefObject<HTMLElement>,
   options?: MapOptions,
-  setMapAPI?: (map: mapboxgl.Map) => void
+  setMapAPI?: (map: mapboxgl.Map) => void,
+  cleanMapAPI?: () => void
 ) {
   useEffect(() => {
     const container = cotainerRef.current;
@@ -28,6 +29,7 @@ export function useMapboxGl(
 
     return () => {
       mapboxGlMap.remove();
+      if (cleanMapAPI) cleanMapAPI();
     };
   }, []);
 }