React TinCanJS

This package provides a React high level wrapper for the tincanjs library using Context and hooks.

How to use

Install the package

npm install react-tincan

Import the TinCan Context Provider, for example:

import { TinCanProvider } from 'react-tincan';

// ...

ReactDOM.render(
    <TinCanProvider>
        <App />
    </TinCanProvider>,
    document.getElementById('root')
);

Now you can send xAPI Statement from your child components like so:

import { useTinCan } from "react-tincan";

// ...

export default function MyFunctionalComponent() {
    const { saveCompleted } = useTinCan();

    const myFunction = () => {
        saveCompleted();
    }

    // ...
}

Supported TinCan API methods

For now only Statement is supported.

How to prepare a TinCan (xAPI) activity package (zip)

Your React build scripts should ultimately add a tincan.xml file to the root of your build folder. Edit the xml details, and modify the launch filename depending on your build entry point. Compress all the files/dirs within the build folder as a .zip.

<?xml version="1.0" encoding="utf-8" ?>
<tincan xmlns="http://projecttincan.com/tincan.xsd">
    <activities>
        <activity id="https://my-domain.com/activity/my-activity" type="http://activitystrea.ms/schema/1.0/game">
            <name>My Activity Name</name>
            <description lang="en-US">My Activity Description</description>
            <launch lang="en-us">index.html</launch>
        </activity>
    </activities>
</tincan>