dispatcher.tsx

import * as React from "react";
import { PropertyControls, ControlType, Rect } from "framer";

const style: React.CSSProperties = {
    height: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    textAlign: "center",
    color: "#8855FF",
    background: "rgba(136, 85, 255, 0.1)",
    overflow: "hidden",
};

// Define type of property
interface Props {
    text: string;
}


export class dispatcher extends React.Component<Props> {

    // Set default properties
    static defaultProps = {
    text: "Hello World!"
    }

    // Items shown in property panel
    static propertyControls: PropertyControls = {
    text: { type: ControlType.String, title: "Text" },
    }

    constructor(props){
        super(props);
        this.escFunction = this.escFunction.bind(this);
      }
      escFunction(event){
        
        console.log(event.keyCode)

        /*
        if(event.keyCode == 38) {
            // Frame[Rect]

            console.log(event.keyCode)    
        } else if(event.keyCode == 40) {
            console.log(event.keyCode)
        }
        */
      }
      componentDidMount(){
        document.addEventListener("keydown", this.escFunction, false);
      }
      componentWillUnmount(){
        document.removeEventListener("keydown", this.escFunction, false);
      }

      

    render() {
    
        return <div style={style}>what</div>;
    }
}