react-touchcode-sdk

This implements the touchcode SDK into an embeddable React Component.

Setup

The library is available on npm. It can be installed with: npm install --save @touchcode/react-touchcode-sdk.

Usage

1. Import react-touchcode-sdk:

import Touchcode from "@touchcode/react-touchcode-sdk";

2. Create a Touchcode component inside your view:

    return (
     <Touchcode campaignId="82F59666-D33B-482B-A7E7-26525C15587B" element="touchcode_enabled_div" progressCallback={handleProgress} decodeCallback={null} autoRedirect={true} testBandwidth={true} styles={{ position:'absolute', backgroundColor:'#009CDE', height:'100%', width:'100%' }}/>
    )

3. Create a handler for the decodeCallback:

  const handleDecode = (event) => {
        console.log('handleDecode', event)
    }

A complete example

The following example consists of a Touchcode component in the main App function. The campaignID must be provided.

Touchcode calls back to by the decodeCallback with the value decoded in the argument code.

Note: Touchcode receives touch input. It must be the top most child of the view and not be occluded by other components.

import React from 'react';
import Touchcode from "@touchcode/react-touchcode-sdk";

function App() {
    const handleProgress = (event) => {
        console.log('handleProgress', event)
    }
    const handleDecode = (event) => {
        console.log('handleDecode', event)
    }
    return (
            <Touchcode campaignId="82F59666-D33B-482B-A7E7-26525C15587B" element="touchcode_enabled_div" progressCallback={handleProgress} decodeCallback={handleDecode} autoRedirect={true} testBandwidth={true} styles={{ position:'absolute', backgroundColor:'#009CDE', height:'100%', width:'100%' }}/>
    );
}
export default App;

Available props

| Name | Type | Default | Description | | ---------------- | ---------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | campaignId | string | REQUIRED | The campign idenfier to use for decoding. | | element | element id | REQUIRED | HTML elemenent id which the decode area is applied too. | | decodeCallback | func | null | Called when a decode is triggered with the decoded text passed as an argument. If no callback is specified the page will auto redirect to the target stored in the campaign. | | progressCallback | func | null | Called when a touch event is triggered touchpoint data passed as an argument. | | autoRedirect | bool | true | Boolean variable to determine whether or not the SDK will automatically redirect to the target URL. The absence of this parameter defaults to “True. | | testBandwidth | func | true | Called when the SDK loads it will test the bandwidth in the background. This can be turned off by passing false. | | styles | any | null | Style applied to the Touchcode Compoment |