Controlling the runner
To interact with the runner you need a reference to the runner instance. That allows you to perform actions like pause, stop and start the runner. You can also retrieve the current state of the runner. All possible functions and properties are in the reference.
If you are using the React component of the runner, have a look here.
đšī¸ Retrieving the runner referenceâ
The runner reference is retrieved from the run
function. This is an async function, so you should use await
or the promise to retrieve the reference.
Using awaitâ
In a modern browser environment, you can use await
to obtain the reference.
- Autoscroll
- Chat
- Classic
import { run } from "tripetto-runner-autoscroll";
// Retrieve the runner reference using await
const runner = await run({
definition: /* Supply your form definition here */,
});
// Now we can interact with the runner
runner.restart();
import { run } from "tripetto-runner-chat";
// Retrieve the runner reference using await
const runner = await run({
definition: /* Supply your form definition here */,
});
// Now we can interact with the runner
runner.restart();
import { run } from "tripetto-runner-classic";
// Retrieve the runner reference using await
const runner = await run({
definition: /* Supply your form definition here */,
});
// Now we can interact with the runner
runner.restart();
Using the promiseâ
If you can't use await
, then use the promise.
- Autoscroll
- Chat
- Classic
import { run } from "tripetto-runner-autoscroll";
// Retrieve the runner reference using promise
run({
definition: /* Supply your form definition here */,
}).then((runner) => {
// Now we can interact with the runner
runner.restart();
});
import { run } from "tripetto-runner-chat";
// Retrieve the runner reference using promise
run({
definition: /* Supply your form definition here */,
}).then((runner) => {
// Now we can interact with the runner
runner.restart();
});
import { run } from "tripetto-runner-classic";
// Retrieve the runner reference using promise
run({
definition: /* Supply your form definition here */,
}).then((runner) => {
// Now we can interact with the runner
runner.restart();
});
Using Reactâ
If you use the React component of the runner, you can use the controller property to retrieve the reference. It works by creating an array with single element of type IAutoscrollController | undefined
in it and then passing that array to the controller
prop of the component. The element at index 0 will be updated with a reference to the controller object as soon as it is available for interaction.
- Autoscroll
- Chat
- Classic
import { AutoscrollRunner, IAutoscrollController } from "tripetto-runner-autoscroll";
import ReactDOM from "react-dom";
const controller: [IAutoscrollController | undefined] = [undefined];
ReactDOM.render(
<>
<AutoscrollRunner
definition={/* Supply your form definition here */}
controller={controller}
/>
<input type="button" value="Pause" onClick={() => controller[0].pause()}
</>,
document.getElementById("root")
);
// On a later moment you can use the controller
controller[0].restart();
import { ChatRunner, IChatController } from "tripetto-runner-chat";
import ReactDOM from "react-dom";
const controller: [IChatController | undefined] = [undefined];
ReactDOM.render(
<>
<ChatRunner
definition={/* Supply your form definition here */}
controller={controller}
/>
<input type="button" value="Pause" onClick={() => controller[0].pause()}
</>,
document.getElementById("root")
);
// On a later moment you can use the controller
controller[0].restart();
import { ClassicRunner, IClassicController } from "tripetto-runner-classic";
import ReactDOM from "react-dom";
const controller: [IClassicController | undefined] = [undefined];
ReactDOM.render(
<>
<ClassicRunner
definition={/* Supply your form definition here */}
controller={controller}
/>
<input type="button" value="Pause" onClick={() => controller[0].pause()}
</>,
document.getElementById("root")
);
// On a later moment you can use the controller
controller[0].restart();
If you have a custom component, you can use useRef
to store the controller reference:
function CustomComponent() {
const controllerRef = useRef<[IAutoscrollController | undefined]>([undefined]);
return (
<AutoscrollRunner
definition={/* Supply your form definition here */}
controller={controllerRef.current}
/>
);
}
đ Referenceâ
- Autoscroll
- Chat
- Classic
Have a look at the complete autoscroll runner API reference for detailed documentation. In the examples above, the following symbols were used:
Have a look at the complete chat runner API reference for detailed documentation. In the examples above, the following symbols were used:
Have a look at the complete classic runner API reference for detailed documentation. In the examples above, the following symbols were used: