Skip to main content

Implement runner using React

It is easy to implement a stock runner using React because the stock runners use React for rendering. So, each stock runner package contains a React component that can be used in React applications. This gives you two options for the implementation when using React:

info

In some cases, it makes sense to use the bootstrap function (option 2) to implement the runner. This is especially the case when you are implementing the runner in a live preview setup. The bootstrap function contains some additional logic for easy loading translations and locale data in a live preview.

✅ 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-foundation
info

The stock runners all depend on the Runner Foundation package and React. The Tripetto Runner Foundation 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.

danger

The react and react-dom packages are peer dependencies of the runner. You should install them yourself. Version 16.14.x or higher is required.

📄 Basic implementation​

The most easy way to use a stock runner in a React application is by using the supplied React component:

import { AutoscrollRunner } from "tripetto-runner-autoscroll";
import ReactDOM from "react-dom";

ReactDOM.render(
  <AutoscrollRunner definition={/* Supply your form definition here */} />,
  document.getElementById("root")
);

Run Try on CodeSandbox

info

In the example above we render the runner component directly with ReactDOM, but of course, you can nest the runner component inside any other React component.

👩‍đŸ’ģ Alternative implementation​

You can also use the bootstrap function to render the runner inside a React component. The following example shows a simple wrapper component using hooks that implements the run function.

import { useRef, useEffect } from "react";
import { run } from "tripetto-runner-autoscroll";

export function TripettoRunner({ definition }) {
  const runnerElementRef = useRef();

  useEffect(() => {
    run({
      element: runnerElementRef.current,
      definition
    });
  }, [definition]);

  return <div ref={runnerElementRef}></div>;
}

Run Try on CodeSandbox

info

This alternative implementation in React is advised when implementing the runner in a live preview setup. The bootstrap function contains some additional logic for easy loading translations and locale data in a live preview.

đŸ“Ĩ 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 Foundation package, 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 ReactDOM from "react-dom";
import { Export } from "tripetto-runner-foundation";

ReactDOM.render(
  <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);
    }}
  />,
  document.getElementById("root")
);

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.

📖 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: