Table of contents

1. Add event listener to check if table loads
2. window.onkeypress / Keypress
   1. Barcode Scanner
      1. Component Example
         1. Use Invisible TextInput for focus
         2. Use Form Input and Catch Submission event, and Retrieve value
      2. React Hook using Js Function
      3. Custom Hook

---

Add event listener to check if table loads

1. add in component you are checking

   useEffect(() => {
     window.parent.postMessage({ action: "tGrid-loaded" });
   }, []);
   

2. and in another component

   useEffect(() => {
     window.addEventListener("message", handleMessage);
   
     return () => {
       window.removeEventListener("message", handleMessage);
     };
   }, []);
   

3. Listening for a resizing event

   useEffect(() => {
     if (tableRef?.current) {
       if (useObserver) {
         const resizeObserver = new ResizeObserver(async () => {
           Promise.resolve(buildPPTObject());
         });
         if (tableRef?.current) {
           resizeObserver.observe(tableRef?.current);
         }
         return () => {
           resizeObserver.disconnect();
         };
       } else {
         Promise.resolve(buildPPTObject());
       }
     }
   }, [tableRef?.current]);
   

window.onkeypress / Keypress

Barcode Scanner

Component Example

Use Invisible TextInput for focus

import React, {useEffect} from "react";
import {StyleSheet, Text, TextInput, View} from "react-native";

export default function App() {
    const invisibleRef = React.useRef(null);

    useEffect(() => {
        invisibleRef.current.focus();
    }, []);

    const focusInvisibleInput = (e) => {
        e.preventDefault();
        if (invisibleRef.current) {
            invisibleRef.current.focus();
        }
    };

    return (<View style={styles.container} onTouchStart={focusInvisibleInput}>
        <TextInput
            ref={invisibleRef}
            autoFocus={true}
            autoCorrect={false}
            autoComplete={false}
            style=
            onChangeText={(text) => console.log("hidden", text)}
        />

        <TextInput
            style=
            placeholder="Type something here"
            onChangeText={(text) => console.log("visible", text)}
        />

        <Text>A nice react native app!</Text>

        <TextInput
            style=
            placeholder="Type some thing else here!"
            onChangeText={(text) => console.log("visible", text)}
        />
    </View>);
}

const styles = StyleSheet.create({
    container: {
        flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center",
    },
});

And after this, you may want to add a generic input handler that times the speed of the input of the text, to figure out if it’s a scan, rather than
manual text input.
(If you get 20 characters
within 50ms, you can be pretty sure it’s a scan, right?)

Use Form Input and Catch Submission event, and Retrieve value

import {useState} from "react";

export default function Modal() {
    const [repairArticles, setRepairArticles] = useState([]);

    function handleBarcodeInput(e) {
        e.preventDefault();
        const input = e.target.querySelector("input");
        const value = input.value;
        setRepairArticles((prev) => {
            return (prev = [...prev, value]);
        });
        input.value = "";
    }

    return (<div>
        <form onSubmit={(e) => handleBarcodeInput(e)}>
            <input id="barcode-input"/>
            <button type="submit" className="hidden"/>
        </form>
        <div className="mt-3">
            {repairArticles.map((el, index) => {
                return <p key={index}>{el}</p>;
            })}
        </div>
    </div>);
}

React Hook using Js Function

Detect when input box filled by keyboard and when by barcode scanner

const ScanComponent = (props) => {
    const [scanned, setScanned] = useState("");
    useEffect(() => {
        const barcode = new BarcodeScaner();
        barcode.initialize();
        return () => {
            barcode.close();
        };
    }, []);

    useEffect(() => {
        const scanHandler = (code) => {
            console.log(code);
            setScanned(code);
        };

        events.on("onbarcodescaned", scanHandler);
        return () => {
            events.off("onbarcodescaned", scanHandler);
        };
    }, [/* here put dependencies for your scanHandler ;) */],);
    return <div>{scanned}</div>;
};

Custom Hook

import {useCallback, useEffect, useState} from "react";

const regExpForShiftKey: RegExp = new RegExp(/shift/, "gi");

export default function useBarcodeScanner() {
    const [lastTimeStamp, setLastTimeStamp] = useState<number>(0);
    const [commonAccessCardBarCode, setCommonAccessCardBarCode] =
        useState<string>("");
    const [scannedText, setScannedText] = useState<string>("");
    const [firstCharacterText, setFirstCharacterText] = useState<string>("");

    const getDiff = useCallback(
        (timeStamp: number): number => {
            return timeStamp - (lastTimeStamp ? lastTimeStamp : 0);
        },
        [lastTimeStamp],
    );

    const saveInTextString = useCallback(
        (keyEntered: string): void => {
            if (keyEntered === "Enter") {
                const fullTextString: string =
                    `${firstCharacterText}${scannedText}`.replace(regExpForShiftKey, "");
                setCommonAccessCardBarCode(fullTextString);
            } else {
                setScannedText(`${scannedText}${keyEntered}`);
            }
        },
        [firstCharacterText, scannedText],
    );

    const setFirstCharOfText = useCallback((keyEntered: string): void => {
        setScannedText("");
        setFirstCharacterText(keyEntered);
    }, []);

    const handleKeyDownEvent = useCallback(
        (event: globalThis.KeyboardEvent): void => {
            const eventTimeStamp: number = event.timeStamp;
            const keyEntered: string = event.key;
            const diff: number = getDiff(eventTimeStamp);

            setLastTimeStamp(event.timeStamp);

            if (diff < 100) {
                saveInTextString(keyEntered);
            } else {
                setFirstCharOfText(keyEntered);
            }
        },
        [getDiff, saveInTextString, setFirstCharOfText],
    );

    const handleEvent = useCallback(
        (event: Event): void => {
            const e: KeyboardEvent = event as KeyboardEvent;
            handleKeyDownEvent(e);
        },
        [handleKeyDownEvent],
    );

    useEffect(() => {
        window.addEventListener("keydown", handleEvent);

        return (): void => {
            window.removeEventListener("keydown", handleEvent);
        };
    }, [handleEvent]);

    return [commonAccessCardBarCode, scannedText];
}