React Wrapper

The make-traffic-integration-react-wrapper package provides a React-friendly integration with a TaskManagerProvider component. It removes the need to manually manage the library instance and event subscriptions.

Installation

npm install make-traffic-integration-react-wrapper make-traffic-integration-core

Setup

Create the TaskManagerApp instance outside the component tree, then pass it to TaskManagerProvider:

import { TaskManagerApp } from 'make-traffic-integration-core';
import { TaskManagerProvider } from 'make-traffic-integration-react-wrapper';

const taskManager = new TaskManagerApp({
  apiUrl: 'YOUR_API_URL',
  appKey: 'YOUR_APP_KEY',
});

TaskManagerProvider

Wrap the part of your application that displays tasks with TaskManagerProvider:

const App = () => (
  <TaskManagerProvider
    taskManagerApp={taskManager}
    userID={currentUser.id}
    template={TaskTemplate}
  />
);

Prop	Type	Description
taskManagerApp	TaskManagerApp	The initialized library instance.
userID	string	The current user's stable identifier.
template	(task, actions) => ReactNode	A render function for each task item.

Custom task template

The template prop receives the task data and an actions object. Use it to render tasks in your own design:

const TaskTemplate = (task, actions) => (
  <div className="task-card">
    <h3>{task.name}</h3>
    <p>{task.description}</p>
    <button onClick={actions.go}>Start</button>
    <button onClick={actions.claim}>Complete</button>
  </div>
);

Action	Description
actions.go	Calls goProcess for this task and user.
actions.claim	Calls claimProcess for this task and user.

Full example

import React from 'react';
import { TaskManagerApp } from 'make-traffic-integration-core';
import { TaskManagerProvider } from 'make-traffic-integration-react-wrapper';

const taskManager = new TaskManagerApp({
  apiUrl: 'YOUR_API_URL',
  appKey: 'YOUR_APP_KEY',
});

const TaskCard = (task, actions) => (
  <div>
    <h3>{task.name}</h3>
    <button onClick={actions.go}>Go</button>
    <button onClick={actions.claim}>Claim</button>
  </div>
);

export default function TaskList({ userID }) {
  return (
    <TaskManagerProvider
      taskManagerApp={taskManager}
      userID={userID}
      template={TaskCard}
    />
  );
}

---

See Events Reference to respond to task lifecycle events in your React components.