Lint

.eslintrc.cjs

@@ -25,12 +25,12 @@ module.exports = getESLintConfig({
           '@typescript-eslint/no-unsafe-member-access': 0,
           '@typescript-eslint/no-unsafe-assignment': 0,
           'import/named': 0,
-          '@typescript-eslint/no-empty-function': ['warn', {allow: ['arrowFunctions']}],
-          '@typescript-eslint/restrict-template-expressions': 0,
           '@typescript-eslint/explicit-module-boundary-types': 0,
           '@typescript-eslint/no-unsafe-return': 0,
           '@typescript-eslint/no-unsafe-call': 0,
-          '@typescript-eslint/restrict-plus-operands': 0
+          '@typescript-eslint/restrict-plus-operands': 0,
+          '@typescript-eslint/no-explicit-any': 0,
+          '@typescript-eslint/no-unsafe-argument': 0
         }
       }
     ]

README.md

@@ -27,7 +27,7 @@ npm install @vis.gl/react-maplibre maplibre-gl
 
 ```js
 import * as React from 'react';
-import Map from '@vis.gl/react-maplibre';
+import {Map} from '@vis.gl/react-maplibre';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
 function App() {

docs/api-reference/attribution-control.md

@@ -5,7 +5,7 @@ React component that wraps the base library's [AttributionControl](https://mapli
 
 ```tsx
 import * as React from 'react';
-import Map, {AttributionControl} from '@vis.gl/react-maplibre';
+import {Map, AttributionControl} from '@vis.gl/react-maplibre';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
 function App() {

docs/api-reference/fullscreen-control.md

@@ -5,7 +5,7 @@ React component that wraps the base library's [FullscreenControl](https://maplib
 
 ```tsx
 import * as React from 'react';
-import Map, {FullscreenControl} from '@vis.gl/react-maplibre';
+import {Map, FullscreenControl} from '@vis.gl/react-maplibre';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
 function App() {

docs/api-reference/geolocate-control.md

@@ -4,7 +4,7 @@ React component that wraps the base library's [GeolocateControl](https://maplibr
 
 ```tsx
 import * as React from 'react';
-import Map, {GeolocateControl} from '@vis.gl/react-maplibre';
+import {Map, GeolocateControl} from '@vis.gl/react-maplibre';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
 function App() {
@@ -83,7 +83,7 @@ You may use it to call any imperative methods:
 ```tsx
 import * as React from 'react';
 import {useRef, useEffect} from 'react';
-import Map, {GeolocateControl} from '@vis.gl/react-maplibre';
+import {Map, GeolocateControl} from '@vis.gl/react-maplibre';
 import type maplibregl from 'maplibre-gl';
 
 function App() {

docs/api-reference/layer.md

@@ -5,7 +5,7 @@ This component allows apps to create a [map layer](https://maplibre.org/maplibre
 
 ```tsx
 import * as React from 'react';
-import Map, {Layer} from '@vis.gl/react-maplibre';
+import {Map, Layer} from '@vis.gl/react-maplibre';
 import type {FillLayer} from '@vis.gl/react-maplibre';
 
 const parkLayer: FillLayer = {

docs/api-reference/map.md

@@ -4,7 +4,7 @@ React component that wraps the base library's [Map](https://maplibre.org/maplibr
 
 ```tsx title="app.tsx"
 import * as React from 'react';
-import Map from '@vis.gl/react-maplibre';
+import {Map} from '@vis.gl/react-maplibre';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
 function App() {
@@ -443,7 +443,7 @@ By module import (and embedding in the final bundle):
 
 ```tsx
 import * as React from 'react';
-import Map from '@vis.gl/react-maplibre';
+import {Map} from '@vis.gl/react-maplibre';
 import maplibregl from 'maplibre-gl';
 
 function App() {
@@ -455,7 +455,7 @@ By dynamic import (thus enable bundle splitting):
 
 ```tsx
 import * as React from 'react';
-import Map from '@vis.gl/react-maplibre';
+import {Map} from '@vis.gl/react-maplibre';
 
 function App() {
   return <Map mapLib={import('maplibre-gl')} />;
@@ -470,7 +470,7 @@ Or to load a pre-bundled version of the library:
 
 ```tsx title="app.tsx"
 import * as React from 'react';
-import Map from '@vis.gl/react-maplibre';
+import {Map} from '@vis.gl/react-maplibre';
 
 function App() {
   return <Map mapLib={window.maplibregl} />;
@@ -522,7 +522,7 @@ Imperative methods are accessible via a [React ref](https://reactjs.org/docs/ref
 ```tsx
 import * as React from 'react';
 import {useRef, useCallback} from 'react';
-import Map from '@vis.gl/react-maplibre';
+import {Map} from '@vis.gl/react-maplibre';
 import type {MapRef} from '@vis.gl/react-maplibre';
 
 function App() {

docs/api-reference/marker.md

@@ -5,7 +5,7 @@ React component that wraps the base library's [Marker](https://maplibre.org/mapl
 
 ```tsx
 import * as React from 'react';
-import Map, {Marker} from '@vis.gl/react-maplibre';
+import {Map, Marker} from '@vis.gl/react-maplibre';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
 function App() {
@@ -121,7 +121,7 @@ You may use it to call any imperative methods:
 ```tsx
 import * as React from 'react';
 import {useRef, useMemo, useCallback} from 'react';
-import Map, {Marker} from '@vis.gl/react-maplibre';
+import {Map, Marker} from '@vis.gl/react-maplibre';
 import maplibregl from 'maplibre-gl';
 
 function App() {

docs/api-reference/navigation-control.md

@@ -5,7 +5,7 @@ React component that wraps the base library's [NavigationControl](https://maplib
 
 ```tsx
 import * as React from 'react';
-import Map, {NavigationControl} from '@vis.gl/react-maplibre';
+import {Map, NavigationControl} from '@vis.gl/react-maplibre';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
 function App() {

docs/api-reference/popup.md

@@ -6,7 +6,7 @@ React component that wraps the base library's [Popup](https://maplibre.org/mapli
 ```tsx
 import * as React from 'react';
 import {useState} from 'react';
-import Map, {Popup} from '@vis.gl/react-maplibre';
+import {Map, Popup} from '@vis.gl/react-maplibre';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
 function App() {
@@ -98,7 +98,7 @@ You may use it to call any imperative methods:
 ```tsx
 import * as React from 'react';
 import {useRef, useEffect} from 'react';
-import Map, {Popup} from '@vis.gl/react-maplibre';
+import {Map, Popup} from '@vis.gl/react-maplibre';
 import maplibregl from 'maplibre-gl';
 
 function App() {

docs/api-reference/scale-control.md

@@ -4,7 +4,7 @@ React component that wraps the base library's [ScaleControl](https://maplibre.or
 
 ```tsx
 import * as React from 'react';
-import Map, {ScaleControl} from '@vis.gl/react-maplibre';
+import {Map, ScaleControl} from '@vis.gl/react-maplibre';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
 function App() {

docs/api-reference/source.md

@@ -5,7 +5,7 @@ This component allows apps to create a [map source](https://maplibre.org/maplibr
 
 ```tsx
 import * as React from 'react';
-import Map, {Source, Layer} from '@vis.gl/react-maplibre';
+import {Map, Source, Layer} from '@vis.gl/react-maplibre';
 import type {CircleLayer} from '@vis.gl/react-maplibre';
 import type {FeatureCollection} from 'geojson';
 

docs/api-reference/use-control.md

@@ -4,7 +4,7 @@ The `useControl` hook is used to create React wrappers for custom map controls.
 
 ```tsx
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
-import Map, {useControl} from '@vis.gl/react-maplibre';
+import {Map, useControl} from '@vis.gl/react-maplibre';
 
 function DrawControl(props: DrawControlProps) {
   useControl(() => new MapboxDraw(props), {

docs/get-started/adding-custom-data.md

@@ -6,7 +6,7 @@ You can inject data and Maplibre native layers using the [Source](../api-referen
 
 ```tsx
 import * as React from 'react';
-import Map, {Source, Layer} from '@vis.gl/react-maplibre';
+import {Map, Source, Layer} from '@vis.gl/react-maplibre';
 import type {CircleLayer} from '@vis.gl/react-maplibre';
 import type {FeatureCollection} from 'geojson';
 

docs/get-started/get-started.md

@@ -14,7 +14,7 @@ npm install --save @vis.gl/react-maplibre maplibre-gl
 
 ```tsx title="app.tsx"
 import * as React from 'react';
-import Map from '@vis.gl/react-maplibre';
+import {Map} from '@vis.gl/react-maplibre';
 import 'maplibre-gl/dist/maplibre-gl.css'; // See notes below
 
 function App() {

docs/get-started/state-management.md

@@ -12,7 +12,7 @@ You may clone a full app configuration for this example [here](https://github.co
 
 ```tsx
 import * as React from 'react';
-import Map from '@vis.gl/react-maplibre';
+import {Map} from '@vis.gl/react-maplibre';
 
 function App() {
   return <Map
@@ -32,7 +32,7 @@ You may clone a full app configuration for this example [here](https://github.co
 
 ```tsx
 import * as React from 'react';
-import Map from '@vis.gl/react-maplibre';
+import {Map} from '@vis.gl/react-maplibre';
 
 function App() {
   const [viewState, setViewState] = React.useState({
@@ -61,7 +61,7 @@ A real-world application likely uses more complicated state flows:
 
 ```tsx
 import * as React from 'react';
-import Map from '@vis.gl/react-maplibre';
+import {Map} from '@vis.gl/react-maplibre';
 
 // npm install @turf/turf
 import * as turf from '@turf/turf';

examples/controls/src/app.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import {useState, useMemo} from 'react';
 import {createRoot} from 'react-dom/client';
-import Map, {
+import {
+  Map,
   Marker,
   Popup,
   NavigationControl,

examples/custom-cursor/src/app.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import {useState, useCallback} from 'react';
 import {createRoot} from 'react-dom/client';
-import Map, {MapStyle} from '@vis.gl/react-maplibre';
+import {Map, MapStyle} from '@vis.gl/react-maplibre';
 import ControlPanel from './control-panel';
 import MAP_STYLE from '../../map-style-basic-v8.json';
 

examples/custom-overlay/src/app.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {useMemo, useState} from 'react';
 import {createRoot} from 'react-dom/client';
-import Map from '@vis.gl/react-maplibre';
+import {Map} from '@vis.gl/react-maplibre';
 import {arc, pie} from 'd3-shape';
 
 import CustomOverlay from './custom-overlay';

examples/deckgl-overlay/src/app.tsx

@@ -3,9 +3,7 @@ import {createRoot} from 'react-dom/client';
 import {ArcLayer} from '@deck.gl/layers';
 import {DeckProps, PickingInfo} from '@deck.gl/core';
 import {MapboxOverlay} from '@deck.gl/mapbox';
-import {useControl} from '@vis.gl/react-maplibre';
-
-import Map, {NavigationControl} from '@vis.gl/react-maplibre';
+import {Map, useControl, NavigationControl} from '@vis.gl/react-maplibre';
 
 const initialViewState = {
   latitude: 37.78,

examples/draggable-markers/src/app.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {useState, useCallback} from 'react';
 import {createRoot} from 'react-dom/client';
-import Map, {Marker, NavigationControl} from '@vis.gl/react-maplibre';
+import {Map, Marker, NavigationControl} from '@vis.gl/react-maplibre';
 
 import ControlPanel from './control-panel';
 import Pin from './pin';

examples/draw-polygon/src/app.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {useState, useCallback} from 'react';
 import {createRoot} from 'react-dom/client';
-import Map from '@vis.gl/react-maplibre';
+import {Map} from '@vis.gl/react-maplibre';
 
 import DrawControl from './draw-control';
 import ControlPanel from './control-panel';

examples/filter/src/app.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {useState, useMemo, useCallback} from 'react';
 import {createRoot} from 'react-dom/client';
-import Map, {Popup, Source, Layer} from '@vis.gl/react-maplibre';
+import {Map, Popup, Source, Layer} from '@vis.gl/react-maplibre';
 import ControlPanel from './control-panel';
 import {countiesLayer, highlightLayer} from './map-style';
 import type {ExpressionSpecification} from 'maplibre-gl';

examples/geocoder/src/app.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {createRoot} from 'react-dom/client';
-import Map from '@vis.gl/react-maplibre';
+import {Map} from '@vis.gl/react-maplibre';
 
 import GeocoderControl from './geocoder-control';
 import ControlPanel from './control-panel';

examples/geojson/src/app.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {useState, useEffect, useMemo, useCallback} from 'react';
 import {createRoot} from 'react-dom/client';
-import Map, {Source, Layer} from '@vis.gl/react-maplibre';
+import {Map, Source, Layer} from '@vis.gl/react-maplibre';
 import ControlPanel from './control-panel';
 
 import {dataLayer} from './map-style';

examples/get-started/basic/app.jsx

@@ -1,7 +1,7 @@
 /* global document */
 import * as React from 'react';
 import {createRoot} from 'react-dom/client';
-import Map, {Marker} from '@vis.gl/react-maplibre';
+import {Map, Marker} from '@vis.gl/react-maplibre';
 
 import 'maplibre-gl/dist/maplibre-gl.css';
 

examples/get-started/controlled/app.jsx

@@ -1,7 +1,7 @@
 /* global document */
 import * as React from 'react';
 import {createRoot} from 'react-dom/client';
-import Map, {Marker} from '@vis.gl/react-maplibre';
+import {Map, Marker} from '@vis.gl/react-maplibre';
 
 import 'maplibre-gl/dist/maplibre-gl.css';
 

examples/get-started/hook/map.jsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Map from '@vis.gl/react-maplibre';
+import {Map} from '@vis.gl/react-maplibre';
 
 import 'maplibre-gl/dist/maplibre-gl.css';
 

examples/get-started/nextjs/pages/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Head from 'next/head';
-import Map, {Marker} from '@vis.gl/react-maplibre';
+import {Map, Marker} from '@vis.gl/react-maplibre';
 
 import 'maplibre-gl/dist/maplibre-gl.css';
 

examples/get-started/redux/map.jsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Map from '@vis.gl/react-maplibre';
+import {Map} from '@vis.gl/react-maplibre';
 
 import {useCallback} from 'react';
 import {useSelector, useDispatch} from 'react-redux';

examples/interaction/src/app.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {useState, useCallback} from 'react';
 import {createRoot} from 'react-dom/client';
-import Map from '@vis.gl/react-maplibre';
+import {Map} from '@vis.gl/react-maplibre';
 import ControlPanel from './control-panel';
 
 const initialViewState = {

examples/layers/src/app.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {useState} from 'react';
 import {createRoot} from 'react-dom/client';
-import Map from '@vis.gl/react-maplibre';
+import {Map} from '@vis.gl/react-maplibre';
 import ControlPanel from './control-panel';
 
 export default function App() {

examples/side-by-side/src/app.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import {useState, useCallback, useMemo} from 'react';
 import {createRoot} from 'react-dom/client';
-import Map from '@vis.gl/react-maplibre';
+import {Map} from '@vis.gl/react-maplibre';
 
 import ControlPanel, {Mode} from './control-panel';
 

examples/terrain/src/app.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {createRoot} from 'react-dom/client';
-import Map, {Source, Layer, TerrainControl} from '@vis.gl/react-maplibre';
+import {Map, Source, Layer, TerrainControl} from '@vis.gl/react-maplibre';
 
 import ControlPanel from './control-panel';
 

examples/viewport-animation/src/app.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {useRef, useCallback} from 'react';
 import {createRoot} from 'react-dom/client';
-import Map, {MapRef} from '@vis.gl/react-maplibre';
+import {Map, MapRef} from '@vis.gl/react-maplibre';
 
 import ControlPanel from './control-panel';