allow user to control React wrapper id (visgl#6010)

Author: Pessimistress

modules/core/src/lib/deck.js

@@ -106,7 +106,7 @@ function getPropTypes(PropTypes) {
 }
 
 const defaultProps = {
-  id: 'deckgl-overlay',
+  id: '',
   width: '100%',
   height: '100%',
 
@@ -424,13 +424,12 @@ export default class Deck {
 
     if (!canvas) {
       canvas = document.createElement('canvas');
+      canvas.id = props.id || 'deckgl-overlay';
       const parent = props.parent || document.body;
       parent.appendChild(canvas);
     }
 
-    const {id, style} = props;
-    canvas.id = id;
-    Object.assign(canvas.style, style);
+    Object.assign(canvas.style, props.style);
 
     return canvas;
   }

modules/react/src/deckgl.js

@@ -190,7 +190,7 @@ const DeckGL = forwardRef((props, ref) => {
   const {viewManager} = thisRef.deck || {};
   const currentViewports = viewManager && viewManager.getViewports();
 
-  const {ContextProvider, width, height, style} = props;
+  const {ContextProvider, width, height, id, style} = props;
 
   const {containerStyle, canvasStyle} = useMemo(() => extractStyles({width, height, style}), [
     width,
@@ -221,14 +221,15 @@ const DeckGL = forwardRef((props, ref) => {
 
     const canvas = createElement('canvas', {
       key: 'canvas',
+      id: id || 'deckgl-overlay',
       ref: canvasRef,
       style: canvasStyle
     });
 
     // Render deck.gl as the last child
     thisRef.control = createElement(
       'div',
-      {id: 'deckgl-wrapper', ref: containerRef, style: containerStyle},
+      {id: `${id || 'deckgl'}-wrapper`, ref: containerRef, style: containerStyle},
       [canvas, childrenUnderViews]
     );
   }