@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} 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} 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	(code) => null	Called when a decode is triggered with the decoded text passed as an argument.
decodeCallback	func	(code) => 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	(code) => null	Called when a touch event is triggered touchpoint data passed as an argument.
styles	any	null	Style applied to the Touchcode Compoment