# 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>
```