React (Vite react-ts template)

Follow these steps to get started with ReactJS from Vite react-ts template.

Set up the workspace by running the following command:

pnpm create vite ocrtest --template react-ts

A folder/directory named ocrtest should appear and the folder/ directory structure should look like this:

ocrtest/
    |
    +-- node_modules/
    |
    +-- public/
    |    |
    |    +-- favicon.svg
    |    |
    |    \-- icons.svg
    |
    +-- src/
    |    |
    |    +-- assets/
    |    |
    |    +-- App.css
    |    |
    |    +-- App.tsx
    |    |
    |    +-- index.css
    |    |
    |    \-- main.tsx
    |
    +-- .gitignore
    |
    +-- package-lock.json
    |
    +-- package.json
    |
    +-- README.md
    |
    +-- tsconfig.app.json
    |
    +-- tsconfig.json
    |
    +-- tsconfig.node.json
    |
    \-- vite.config.ts

Extract file Verihubs WebSDK OCR [version] [organization].zip file. Rename build folder/directory as ocr.
Put extracted ocr folder/directory that contains the ocr engine and builders like builder.js, into the public folder/directory of project folder/directory (ocrtest).
Add the ocr package to package.json by running this command in the ocrtest react.js project.
```
ocrtest$ pnpm i file:public/ocr
```
This will add @verihubs/ocr dependency in package.json.
Add an import to main.tsx file inside src folder.
```
import Builder from '@verihubs/ocr';
```
Add the following code to the index.js file inside src folder.
```
window.OCRSDK = new Builder()
  .setAttemptCount(3)
  .setProcessingFlow({
    isAsync: false,
  })
  .setProxyMiddleware({
  	Correction: {
      url: 'http://localhost:8888/ocr/extract/correction',
    },
    ExtractSync: {
      url: 'http://localhost:8888/ocr/extract',
      headers: {
        'App-ID': '<replace-me-with-app-id>',
        'API-Key': '<replace-me-with-api-key>',
      },
    },
    License: {
      url: 'http://localhost:8888/license/{license_id}/check',
      headers: {
        'App-ID': '<replace-me-with-app-id>',
        'API-Key': '<replace-me-with-api-key>',
      },
    },
  })
  .setURL('./ocr')
  .build();
```
Replace proxy middleware URLs with a URL that points to the correct endoints, and replace <replace-me-with-app-id> and <replace-me-with-api-key> with the appropriate APP-ID and APIKey for the ocr (remove the headers if the api doesn't need credentials or the url is pointing towards an intermediate endpoint).

🚧
Look Out!
To not accidentally leak of AppID and APIKey for ocr, always pass them to an intermediate endpoint (like a proxy middleware) and append the AppID and APIKey header before reaching Verihubs' ocr service in production. Additional data can also be passed to this intermediate endpoint for end user identification.
For more information about creating a Proxy Middleware, refer to Proxy Middleware.
For API documentation of the Builder, refer to Builder.
Add import for React in App.tsx.
```
import React from 'react';
```

Populate the App component logic by the code below:

function App() {
    const [image, setImage] = React.useState('');
    const [data, setData] = React.useState('');

    React.useEffect(() => {
        const ocrMessageListener = ({
            data: { data, subject },
            }: {
                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                data: { data: any; subject: string };
            }) => {
            switch (subject) {
                case "OCR.Verbose":
                    alert(data.message);
                    break;
                case "Internal.Error":
                    switch (data.message) {
                        case "SANDBOX_ID_NOT_ALLOWED":
                            alert("Invalid sandbox image code");
                            window.OCRSDK.onDestroy();
                            break;
                        case "INSUFFICIENT_QUOTA":
                            alert("Insufficient quota");
                            window.OCRSDK.onDestroy();
                            break;
                        case "INTERNAL_SERVER_ERROR":
                            alert("Internal server error occured.");
                            break;
                        case "PROCESS_TIMEOUT":
                            alert("KTP Extraction timeout.");
                            break;
                        default:
                            alert("An error occured. Please check the console.");
                            console.log(data.message);
                            break;
                    }
                    break;
                case "OCR.Success":
                    setImage(data.image.url);
                    setData(JSON.stringify(data, undefined, 2));
                    setTimeout(() => {
                        window.OCRSDK.onDestroy();
                    }, 3000);
                    break;
                case "OCR.Cancelled":
                case "OCR.OutOfChance":
                    document.getElementById('data-result').innerText = data.message;
                    window.OCRSDK.onDestroy();
                    break;
                case "Camera.NotFound":
                case "Camera.PermissionDenied":
                    alert("Camera is not detected or permission denied");
                    window.OCRSDK.onDestroy();
                    break;
            }
        };
        window.addEventListener('message', ocrMessageListener);

        return () => {
            window.removeEventListener('message', ocrMessageListener);
        };
    }, []);

    const doOCRProcess = React.useCallback(() => {
        window.OCRSDK.onStart();
    }, []);

    return (

🚧
Info
Check System Messages for full system message references.

Replace the jsx component inside App.tsx with the code below:

return (
  <div>
    <button onClick={doOCRProcess}>
      Run OCR Process
    </button>
    <br />
    <img src={image} alt="" />
    <div className="data-result">{data}</div>
  </div>
);

Replace the whole content of App.css with the code below:

.data-result {
  font-family: 'Courier New', Courier, monospace;
  white-space: pre-wrap;
  background-color: #0002;
  overflow: auto;
}

Add the dependency to optimizeDeps.include and build.commonjsOptions.include in vite.config.js with code below:

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ["@verihubs/ocr"],
  },
  build: {
    commonjsOptions: {
      include: [/ocr/, /node_modules/],
    },
  },
});

Create a new file named window.d.ts inside your src directory (e.g., src/types/window.d.ts) and add the following code to the file to extend the Window interface:
```
import type { BuilderOutput } from "@verihubs/ocr";

// src/window.d.ts
export {};

declare global {
  interface Window {
    OCRSDK: BuilderOutput;
  }
}
```
Note: Version below 1.1.2 need implement OCRSDK as any.
Ensure TypeScript recognizes the new file by adding it to the include array in your tsconfig.app.json file.
```
{
  "compilerOptions": { ... },
  "include": ["src", "src/types/window.d.ts"],
}
```

To try the above implementation you can run the following command from the ocr project:

ocrtest$ pnpm dev