Migrate to import * as React from 'react' (#1038)

docs/advanced/custom-components.md

@@ -10,7 +10,7 @@ all extend the `BaseControl` React component. You may also create your own map c
 The following component renders a label "(longitude, latitude)" at the given coordinate:
 
 ```js
-import React from 'react';
+import * as React from 'react';
 import {BaseControl} from 'react-map-gl';
 
 class CustomMarker extends BaseControl {

docs/advanced/custom-overlays.md

@@ -5,7 +5,7 @@ resuable overlays that others can include into their project. Overlays can acces
 the current viewport through the React [context](https://facebook.github.io/react/docs/context.html):
 
 ```js
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import {BaseControl} from 'react-map-gl';
 

docs/api-reference/geolocate-control.md

@@ -5,7 +5,8 @@
 This is a React equivalent of Mapbox's [GeolocateControl](https://www.mapbox.com/mapbox-gl-js/api/#geolocatecontrol).
 
 ```js
-import React, { Component } from "react";
+import * as React from 'react';
+import { Component } from "react";
 import ReactMapGL, {GeolocateControl} from "react-map-gl";
 
 class Map extends Component {

docs/api-reference/layer.md

@@ -5,7 +5,7 @@
 This component allows apps to create a [map layer](https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers) using React.
 
 ```js
-import React from 'react';
+import * as React from 'react';
 import ReactMapGL, {Layer} from 'react-map-gl';
 
 const parkLayer = {

docs/api-reference/marker.md

@@ -26,7 +26,8 @@ class Map extends Component {
 Performance notes: if a large number of markers are needed, it's generally favorable to cache the `<Marker>` nodes, so that we don't rerender them when the viewport changes.
 
 ```js
-import React, {PureComponent} from 'react';
+import * as React from 'react';
+import {PureComponent} from 'react';
 import ReactMapGL, {Marker} from 'react-map-gl';
 
 const CITIES = [...];

docs/api-reference/navigation-control.md

@@ -6,7 +6,8 @@ This is a React equivalent of Mapbox's [NavigationControl](https://www.mapbox.co
 which provides zoom buttons and a compass button.
 
 ```js
-import React, {Component} from 'react';
+import * as React from 'react';
+import {Component} from 'react';
 import ReactMapGL, {NavigationControl} from 'react-map-gl';
 
 class Map extends Component {

docs/api-reference/source.md

@@ -5,7 +5,7 @@
 This component allows apps to create a [map source](https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources) using React. It may contain [Layer](/docs/api-reference/layer.md) components as children.
 
 ```js
-import React from 'react';
+import * as React from 'react';
 import ReactMapGL, {Source, Layer} from 'react-map-gl';
 
 const geojson = {

docs/get-started/get-started.md

@@ -12,7 +12,8 @@ npm install --save react-map-gl
 ## Example
 
 ```js
-import React, { useState } from 'react';
+import * as React from 'react';
+import { useState } from 'react';
 import ReactMapGL from 'react-map-gl';
 
 function Map() {

examples/additional-overlays/src/app.js

@@ -19,8 +19,9 @@
 // THE SOFTWARE.
 
 /* global document, window */
-import ReactDOM from 'react-dom';
-import React, {Component} from 'react';
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import {Component} from 'react';
 import MapGL from 'react-map-gl';
 import Immutable from 'immutable';
 

examples/additional-overlays/src/choropleth-overlay.js

@@ -17,7 +17,8 @@
 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
-import React, {PureComponent} from 'react';
+import * as React from 'react';
+import {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {extent} from 'd3-array';
 import {scaleLinear} from 'd3-scale';

examples/additional-overlays/src/scatterplot-overlay.js

@@ -17,7 +17,8 @@
 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
-import React, {PureComponent} from 'react';
+import * as React from 'react';
+import {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 
 import Immutable from 'immutable';

examples/clusters/src/app.js

@@ -1,4 +1,5 @@
-import React, {Component} from 'react';
+import * as React from 'react';
+import {Component} from 'react';
 import {render} from 'react-dom';
 import MapGL, {Source, Layer} from 'react-map-gl';
 

examples/clusters/src/control-panel.js

@@ -1,4 +1,5 @@
-import React, {PureComponent} from 'react';
+import * as React from 'react';
+import {PureComponent} from 'react';
 
 export default class ControlPanel extends PureComponent {
   render() {

examples/controls/src/app.js

@@ -1,4 +1,5 @@
-import React, {Component} from 'react';
+import * as React from 'react';
+import {Component} from 'react';
 import {render} from 'react-dom';
 import MapGL, {Popup, NavigationControl, FullscreenControl, ScaleControl} from 'react-map-gl';
 

examples/controls/src/city-info.js

@@ -1,4 +1,5 @@
-import React, {PureComponent} from 'react';
+import * as React from 'react';
+import {PureComponent} from 'react';
 
 export default class CityInfo extends PureComponent {
   render() {

examples/controls/src/control-panel.js

@@ -1,4 +1,5 @@
-import React, {PureComponent} from 'react';
+import * as React from 'react';
+import {PureComponent} from 'react';
 
 export default class ControlPanel extends PureComponent {
   render() {

examples/controls/src/pins.js

@@ -1,4 +1,5 @@
-import React, {PureComponent} from 'react';
+import * as React from 'react';
+import {PureComponent} from 'react';
 import {Marker} from 'react-map-gl';
 
 const ICON = `M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3

examples/custom-controller/src/app.js

@@ -1,5 +1,6 @@
 /* global window */
-import React, {Component} from 'react';
+import * as React from 'react';
+import {Component} from 'react';
 import {render} from 'react-dom';
 import MapGL from 'react-map-gl';
 

examples/custom-controller/src/control-panel.js

@@ -1,4 +1,5 @@
-import React, {PureComponent} from 'react';
+import * as React from 'react';
+import {PureComponent} from 'react';
 
 const camelPattern = /(^|[A-Z])[a-z]*/g;
 

examples/custom-cursor/src/app.js

@@ -1,5 +1,6 @@
 /* global window */
-import React, {Component} from 'react';
+import * as React from 'react';
+import {Component} from 'react';
 import {render} from 'react-dom';
 import MapGL from 'react-map-gl';
 import ControlPanel from './control-panel';

examples/custom-cursor/src/control-panel.js

@@ -1,4 +1,5 @@
-import React, {PureComponent} from 'react';
+import * as React from 'react';
+import {PureComponent} from 'react';
 
 // Layer id patterns by category
 const layerSelector = {

examples/deckgl-overlay/src/app.js

@@ -1,4 +1,5 @@
-import React, {Component} from 'react';
+import * as React from 'react';
+import {Component} from 'react';
 import {render} from 'react-dom';
 import DeckGL, {ArcLayer} from 'deck.gl';
 import MapGL from 'react-map-gl';

examples/draggable-markers/src/app.js

@@ -1,4 +1,5 @@
-import React, {Component} from 'react';
+import * as React from 'react';
+import {Component} from 'react';
 import {render} from 'react-dom';
 import MapGL, {Marker, NavigationControl} from 'react-map-gl';
 

examples/draggable-markers/src/control-panel.js

@@ -1,4 +1,5 @@
-import React, {PureComponent} from 'react';
+import * as React from 'react';
+import {PureComponent} from 'react';
 
 const eventNames = ['onDragStart', 'onDrag', 'onDragEnd'];
 

examples/draggable-markers/src/pin.js

@@ -1,4 +1,5 @@
-import React, {PureComponent} from 'react';
+import * as React from 'react';
+import {PureComponent} from 'react';
 
 const ICON = `M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3
   c0,0,0.1,0.1,0.1,0.2c0.2,0.3,0.4,0.6,0.7,0.9c2.6,3.1,7.4,7.6,7.4,7.6s4.8-4.5,7.4-7.5c0.2-0.3,0.5-0.6,0.7-0.9

examples/draw-polygon/src/app.js

@@ -1,4 +1,5 @@
-import React, {Component} from 'react';
+import * as React from 'react';
+import {Component} from 'react';
 import {render} from 'react-dom';
 import MapGL from 'react-map-gl';
 import {Editor, EditorModes} from 'react-map-gl-draw';

examples/draw-polygon/src/control-panel.js

@@ -1,4 +1,5 @@
-import React, {PureComponent} from 'react';
+import * as React from 'react';
+import {PureComponent} from 'react';
 import area from '@turf/area';
 
 export default class ControlPanel extends PureComponent {

examples/filter/src/app.js

@@ -1,4 +1,5 @@
-import React, {Component} from 'react';
+import * as React from 'react';
+import {Component} from 'react';
 import {render} from 'react-dom';
 import MapGL, {Popup, Source, Layer} from 'react-map-gl';
 import ControlPanel from './control-panel';

examples/filter/src/control-panel.js

@@ -1,4 +1,5 @@
-import React, {PureComponent} from 'react';
+import * as React from 'react';
+import {PureComponent} from 'react';
 
 export default class ControlPanel extends PureComponent {
   render() {

examples/geojson-animation/src/app.js

@@ -1,5 +1,6 @@
 /* global window */
-import React, {Component} from 'react';
+import * as React from 'react';
+import {Component} from 'react';
 import {render} from 'react-dom';
 import MapGL, {Source, Layer} from 'react-map-gl';
 

examples/geojson-animation/src/control-panel.js

@@ -1,4 +1,5 @@
-import React, {PureComponent} from 'react';
+import * as React from 'react';
+import {PureComponent} from 'react';
 
 export default class ControlPanel extends PureComponent {
   render() {

examples/geojson/src/app.js

@@ -1,4 +1,5 @@
-import React, {Component} from 'react';
+import * as React from 'react';
+import {Component} from 'react';
 import {render} from 'react-dom';
 import MapGL, {Source, Layer} from 'react-map-gl';
 import ControlPanel from './control-panel';

examples/geojson/src/control-panel.js

@@ -1,4 +1,5 @@
-import React, {PureComponent} from 'react';
+import * as React from 'react';
+import {PureComponent} from 'react';
 
 export default class ControlPanel extends PureComponent {
   render() {

examples/get-started/classic/app.js

@@ -1,5 +1,6 @@
 /* global document */
-import React, {Component} from 'react';
+import * as React from 'react';
+import {Component} from 'react';
 import {render} from 'react-dom';
 import MapGL from 'react-map-gl';
 

examples/get-started/hooks/app.js

@@ -1,5 +1,6 @@
 /* global document */
-import React, {useState} from 'react';
+import * as React from 'react';
+import {useState} from 'react';
 import {render} from 'react-dom';
 import MapGL from 'react-map-gl';
 

examples/heatmap/src/app.js

@@ -1,4 +1,5 @@
-import React, {Component} from 'react';
+import * as React from 'react';
+import {Component} from 'react';
 import {render} from 'react-dom';
 import MapGL, {Source, Layer} from 'react-map-gl';
 import ControlPanel from './control-panel';

examples/heatmap/src/control-panel.js

@@ -1,4 +1,5 @@
-import React, {PureComponent} from 'react';
+import * as React from 'react';
+import {PureComponent} from 'react';
 
 export default class ControlPanel extends PureComponent {
   render() {

examples/interaction/src/app.js

@@ -1,4 +1,5 @@
-import React, {Component} from 'react';
+import * as React from 'react';
+import {Component} from 'react';
 import {render} from 'react-dom';
 import MapGL, {Marker} from 'react-map-gl';
 import ControlPanel from './control-panel';

examples/interaction/src/control-panel.js

@@ -1,4 +1,5 @@
-import React, {PureComponent} from 'react';
+import * as React from 'react';
+import {PureComponent} from 'react';
 
 const camelPattern = /(^|[A-Z])[a-z]*/g;
 

examples/layers/src/app.js

@@ -1,4 +1,5 @@
-import React, {Component} from 'react';
+import * as React from 'react';
+import {Component} from 'react';
 import {render} from 'react-dom';
 import MapGL from 'react-map-gl';
 import ControlPanel from './control-panel';

examples/layers/src/control-panel.js

@@ -1,4 +1,5 @@
-import React, {PureComponent} from 'react';
+import * as React from 'react';
+import {PureComponent} from 'react';
 import {fromJS} from 'immutable';
 import MAP_STYLE from '../../map-style-basic-v8.json';
 

examples/locate-user/src/app.js

@@ -1,4 +1,5 @@
-import React, {Component} from 'react';
+import * as React from 'react';
+import {Component} from 'react';
 import {render} from 'react-dom';
 import MapGL, {GeolocateControl} from 'react-map-gl';
 

examples/reuse-map/src/app.js

@@ -1,4 +1,5 @@
-import React, {Component} from 'react';
+import * as React from 'react';
+import {Component} from 'react';
 import {render} from 'react-dom';
 import BartMap from './bart-map';
 

examples/reuse-map/src/bart-map.js

@@ -1,4 +1,5 @@
-import React, {Component} from 'react';
+import * as React from 'react';
+import {Component} from 'react';
 import MapGL, {Marker} from '../../../src';
 
 import bartStations from '../../.data/bart-station.json';

examples/viewport-animation/src/app.js

@@ -1,4 +1,5 @@
-import React, {Component} from 'react';
+import * as React from 'react';
+import {Component} from 'react';
 import {render} from 'react-dom';
 import MapGL, {FlyToInterpolator} from 'react-map-gl';
 

examples/viewport-animation/src/control-panel.js

@@ -1,4 +1,5 @@
-import React, {PureComponent} from 'react';
+import * as React from 'react';
+import {PureComponent} from 'react';
 
 import CITIES from '../../.data/cities.json';
 

examples/zoom-to-bounds/src/app.js

@@ -1,4 +1,5 @@
-import React, {Component} from 'react';
+import * as React from 'react';
+import {Component} from 'react';
 import {render} from 'react-dom';
 import MapGL, {LinearInterpolator, WebMercatorViewport} from 'react-map-gl';
 import bbox from '@turf/bbox';

examples/zoom-to-bounds/src/control-panel.js

@@ -1,4 +1,5 @@
-import React, {PureComponent} from 'react';
+import * as React from 'react';
+import {PureComponent} from 'react';
 
 export default class ControlPanel extends PureComponent {
   render() {

src/components/base-control.js

@@ -18,7 +18,8 @@
 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
-import React, {PureComponent, createRef} from 'react';
+import * as React from 'react';
+import {PureComponent, createRef} from 'react';
 import PropTypes from 'prop-types';
 import MapContext from './map-context';
 

src/components/fullscreen-control.js

@@ -23,7 +23,7 @@
 import {document} from '../utils/globals';
 import PropTypes from 'prop-types';
 import BaseControl from './base-control';
-import React from 'react';
+import * as React from 'react';
 import mapboxgl from '../utils/mapboxgl';
 
 import type {BaseControlProps} from './base-control';

src/components/geolocate-control.js

@@ -1,7 +1,8 @@
 // @flow
 
 /* global window */
-import React, {createRef} from 'react';
+import * as React from 'react';
+import {createRef} from 'react';
 import PropTypes from 'prop-types';
 import WebMercatorViewport from 'viewport-mercator-project';
 

src/components/interactive-map.js

@@ -1,5 +1,6 @@
 // @flow
-import React, {PureComponent, createRef} from 'react';
+import * as React from 'react';
+import {PureComponent, createRef} from 'react';
 import PropTypes from 'prop-types';
 
 import StaticMap from './static-map';

src/components/layer.js

@@ -18,7 +18,8 @@
 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
-import React, {PureComponent} from 'react';
+import * as React from 'react';
+import {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import MapContext from './map-context';
 import assert from '../utils/assert';

src/components/marker.js

@@ -18,7 +18,7 @@
 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import DraggableControl from './draggable-control';
 

src/components/navigation-control.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import BaseControl from './base-control';
 

src/components/popup.js

@@ -18,7 +18,8 @@
 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
-import React, {createRef} from 'react';
+import * as React from 'react';
+import {createRef} from 'react';
 import PropTypes from 'prop-types';
 import BaseControl from './base-control';
 

src/components/scale-control.js

@@ -18,7 +18,7 @@
 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import BaseControl from './base-control';
 import mapboxgl from '../utils/mapboxgl';

src/components/source.js

@@ -18,7 +18,8 @@
 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
-import React, {PureComponent, cloneElement} from 'react';
+import * as React from 'react';
+import {PureComponent, cloneElement} from 'react';
 import PropTypes from 'prop-types';
 import MapContext from './map-context';
 import assert from '../utils/assert';

src/components/static-map.js

@@ -18,7 +18,8 @@
 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
-import React, {PureComponent, createRef} from 'react';
+import * as React from 'react';
+import {PureComponent, createRef} from 'react';
 import PropTypes from 'prop-types';
 
 import {normalizeStyle} from '../utils/style-utils';

src/overlays/canvas-overlay.js

@@ -19,7 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import BaseControl from '../components/base-control';
 import {window} from '../utils/globals';

src/overlays/html-overlay.js

@@ -20,7 +20,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import BaseControl from '../components/base-control';
 

src/overlays/svg-overlay.js

@@ -20,7 +20,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import BaseControl from '../components/base-control';
 

test/render/index.js

@@ -1,6 +1,6 @@
 /* global window, document */
 import test from 'tape-promise/tape';
-import React from 'react';
+import * as React from 'react';
 import MapGL from 'react-map-gl';
 import {render, unmountComponentAtNode} from 'react-dom';
 

test/render/test-cases.js

@@ -1,5 +1,5 @@
 /* global __MAPBOX_TOKEN__ */
-import React from 'react';
+import * as React from 'react';
 import {StaticMap, NavigationControl, GeolocateControl, Popup, Source, Layer} from 'react-map-gl';
 
 const EMPTY_MAP_STYLE = {

test/src/components/map.spec.js

@@ -1,6 +1,6 @@
 /* global setTimeout, clearTimeout */
 import MapGL, {InteractiveMap} from 'react-map-gl';
-import React from 'react';
+import * as React from 'react';
 import ReactTestUtils from 'react-test-renderer/shallow';
 import ReactTestRenderer from 'react-test-renderer';
 import sinon from 'sinon';

test/src/components/marker.spec.js

@@ -1,5 +1,5 @@
 import {Marker} from 'react-map-gl';
-import React from 'react';
+import * as React from 'react';
 import ReactTestRenderer from 'react-test-renderer';
 import WebMercatorViewport from 'viewport-mercator-project';
 import sinon from 'sinon';

website/src/home.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {Home} from 'gatsby-theme-ocular/components';
 import styled from 'styled-components';