react component demo'ing react-grid-layout and pan pinch zoom

app.js

import React, {useEffect} from 'react'
import './index.css';
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import {todoList} from './constants/todo'
import {useState} from 'react'
import 'react-grid-layout/css/styles.css'
import 'react-resizable/css/styles.css'
import GridLayout from 'react-grid-layout';

function App(props) {
  let [todos, setTodos] = useState(todoList())
  console.log(props)

  useEffect(() => {
    detectSpacebar()
  }, [])

  const inv = (hex) => '#' + hex.match(/[a-f0-9]{2}/ig).map(e => (255 - parseInt(e, 16) | 0).toString(16).replace(/^([a-f0-9])$/, '0$1')).join('')


  let [disableCanvas, setDisableCanvas] = useState(true)
  let [allowObjectDragging, setAllowObjectDragging] = useState(true)

  let [defaultScale, setDefaultScale] = useState(1)
  

  function renderList(list) {
    return todos.map((n) => {
      return (
        <div key={n.i} className="d-block card p-2 m-2" style={{backgroundColor: n.bg}}>
          <strong style={{color: inv(n.bg), fontSize: '120%'}}>
            {n.body}
          </strong>
        </div>
      )
    })
  }

  function detectSpacebar() {
    let body = document.querySelector('body')
    window.addEventListener('keydown', function(e) {
      if(e.keyCode == 32 && e.target == document.body) {
        e.preventDefault();
        setDisableCanvas(!disableCanvas)
        console.log('pressing spacebar')
        body.classList.add('grabbing')
        setAllowObjectDragging(false)
      }
    });

    window.addEventListener('keyup', function(e) {
      if(e.keyCode == 32 && e.target == document.body) {
        e.preventDefault();
        setAllowObjectDragging(true)
        console.log('releasing spacebar')
        body.classList.remove('grabbing')
      }
    });
  }

  return (

    <TransformWrapper
      defaultScale={defaultScale}
      defaultPositionX={200}
      defaultPositionY={100}
      wheel={{
        wheelEnabled: false
      }}
      options={{
        limitToBounds: false,
        disabled: disableCanvas,
        centerContent: true
      }}
    >
      {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
        <>
          <div 
            style={{
              position: 'fixed', 
              bottom: 0, 
              zIndex: 200,
              left: 0
            }}
          >
            <button onClick={zoomIn} className="btn btn-primary m-1">+</button>
            <button onClick={(e) => {zoomOut(e); setDefaultScale(0.5)}} className="btn btn-secondary m-1">-</button>
            <button onClick={resetTransform} className="btn btn-warning m-1">x</button>
          </div>
          <TransformComponent>
            <GridLayout 
              onDragStart={() => {setDisableCanvas(true)}}
              onDrag={() => {setDisableCanvas(true)}}
              onDragStop={() => {setDisableCanvas(false)}}
              onResizeStop={() => {setDisableCanvas(false)}}
              onResizeStart={() => {setDisableCanvas(true)}}
              onResize={() => {setDisableCanvas(true)}}
              className="layout" 
              layout={todos} 
              cols={12} 
              rowHeight={30} 
              width={1920}
              breakpoints={{lg: 1920, md: 996, sm: 768, xs: 480, xxs: 0}}
              isDraggable={allowObjectDragging}
            >
              {renderList()}  
            </GridLayout>
          </TransformComponent>
        </>
      )}
    </TransformWrapper>
  
  );
}

export default App;