Skip to main content

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.

tip

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.

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();

Using the promise​

If you can't use await, then use the promise.

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();
});

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.

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();
tip

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​

Have a look at the complete autoscroll runner API reference for detailed documentation. In the examples above, the following symbols were used: