Skip to main content

Implement runner using React

The stock runners comes with a built-in React component. This makes it very easy to use the runners in a React application. This quickstart shows how to use it.

✅ Add packages to your project​

First, you need to add the required packages to your project. To do so, run the following command:

npm install @tripetto/runner-autoscroll @tripetto/runner
info

The stock runners all depend on the Runner library and React. The Tripetto Runner library is the actual workhorse of the Tripetto runners. It parses the form definition and prepares it for UI rendering. React is used for the actual rendering.

📄 Basic implementation​

The next step is to import the AutoscrollRunner React component. Here's an example:

import { AutoscrollRunner } from "@tripetto/runner-autoscroll";

function ExampleApp() {
  return (
    <div>
      <h1>Example app</h1>
      <AutoscrollRunner definition={/* Supply your form definition here */} />
    </div>
  );
}

Run Try on CodeSandbox

đŸ“Ĩ Collecting response data​

The next step is actual data retrieval from the form. To do so, you use the onSubmit event. This event fires when the form completes and the response data is ready for further processing. The event receives a reference to the active form instance. Together with one of the Export functions from the Runner library, you use it to retrieve data in a convenient format. The following example shows how to export the data using the exportables or CSV function.

import { AutoscrollRunner } from "@tripetto/runner-autoscroll";
import { Export } from "@tripetto/runner";

function ExampleApp() {
  return (
    <div>
      <h1>Example app</h1>
      <AutoscrollRunner
        definition={/* Supply your form definition here */}
        onSubmit={(instance) => {
          // This exports all exportable data in the form
          const exportables = Export.exportables(instance);

          // Iterate through all the fields
          exportables.fields.forEach((field) => {
            // Output each field name and value to the console
            console.log(`${field.name}: ${field.string}`);
          });

          // This exports the collected data as a CSV object
          const csv = Export.CSV(instance);

          // Output CSV to the console
          console.log(csv.fields);
          console.log(csv.record);
        }}
      />
    </div>
  );
}

Run Try on CodeSandbox

tip

The onSubmit event supports some additional features for error handling. Have a look at the Collecting response data guide for more information and guidance.

🎞ī¸ Video​

📖 Reference​

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

⏭ī¸ Up next​

Now you've got the basic implementation for the runner up and running, dive deeper into the following topics: