@touchcode/react-touchcode-sdk

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

• Import react-touchcode-sdk:

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

• 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%' }}/>
    )

• 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