Asliri-ektp-reader-react NPM

ASLIRI - EKTP READER - WEB SDK (React Component)

Description

You can show data in EKTP via web by ASLIRI. The SDK support for ReactJS / NextJS

Check out the SDK for a simplified integration.

1. Get your READER ID with ASLIRI Team

2. Install Library via NPM

npm i asliri-ektp-reader-react@0.0.4 --save

3. Sample Code

Tested (NextJs 14.x / latest version AppRouter mode)

file ./src/components/EktpPage.tsx:

"use client"

import { EktpReader } from "asliri-ektp-reader-react"
import { useState } from "react"

export default function EktpPage() {
    const [imag, setImage]: any = useState("")
    const [demog, setDemog]: any = useState("")

    // readerid
    const readerID = "XXXX"

    // false for local, true for production
    const secure = false 

    // handle error
    const handleError = (err: any) => {
        console.log({ err })
    }

    // handle result
    const handleResult = (data: any) => {
        if (data.cardIn !== undefined) {
            console.log("card in")
        }

        if (data.photo !== undefined) {
            console.log("photo ", data.photo)
            setImage(data.photo)
        }

        if (data.demographic !== undefined) {
            console.log("demographic ", data.demographic)
            setDemog(data.demographic)
        }

        if (data.cardOut !== undefined) {
            console.log("card out")
        }
    }

    return (
        <>
            <EktpReader handleError={handleError} readerId={readerID} getResult={handleResult} secure={secure}></EktpReader>
            <table>
                <tr key={0}>
                    <td>PHOTO</td>
                    <td><img src={imag} /></td>
                </tr>
                <tr key={1}>
                    <td>DEMOGRAPHIC ALL</td>
                    <td>{JSON.stringify(demog)}</td>
                </tr>
            </table>
        </>
    );

file in ./src/app/page.tsx:

import dynamic from "next/dynamic"

export default function Page() {
  const EktpLazy = dynamic(() => import("@/components/EktpPage"), {
    ssr: false
  });

  return (
    <>
      <EktpLazy />
    </>
  )
}

Tested reactjs 18.3.1 or latest

file ./src/EktpPage.js:

import { useState } from "react"
import {EktpReader} from "asliri-ektp-reader-react"
export default function EktpPage() {
    const [imag, setImage] = useState("")
    const [demog, setDemog] = useState("")

    // reader id
    const readerID = "XXX"

    // false for local, true for production
    const secure = false

    // handle error
    const handleError = (err) => {
        console.log({ err })
    }
    
    // handle result
    const handleResult = (data) => {
        if (data.cardIn !== undefined) {
            console.log("card in")
        }

        if (data.photo !== undefined) {
            console.log("photo ", data.photo)
            setImage(data.photo)
        }

        if (data.demographic !== undefined) {
            console.log("demographic ", data.demographic)
            setDemog(data.demographic)
        }

        if (data.cardOut !== undefined) {
            console.log("card out")
        }
    }
    return (
        <>
        <EktpReader handleError={handleError} readerId={readerID} getResult={handleResult} secure={secure}></EktpReader>
        <table>
        <tr key={0}>
          <td>PHOTO</td>
          <td><img src={imag} /></td>
        </tr>
        <tr key={1}>
          <td>DEMOGRAPHIC ALL</td>
          <td>{JSON.stringify(demog)}</td>
        </tr>
      </table>
      </>
    )
}

file in ./src/App.js:

import { Suspense, useEffect, useState } from "react"
import { lazy } from 'react';

function App() {

  const EktpLazy = lazy(() =>import('./EktpPage.js'));

  return (
    <>
      <Suspense>
          <EktpLazy />
        </Suspense>
    </>
  );
}

export default App;

Thank you.