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:
- Use the runner component (preferred approach);
- Use the bootstrap function.
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:
- Autoscroll
- Chat
- Classic
npm install tripetto-runner-autoscroll tripetto-runner-foundation
npm install tripetto-runner-chat tripetto-runner-foundation
npm install tripetto-runner-classic tripetto-runner-foundation
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.
đ Basic implementationâ
The most easy way to use a stock runner in a React application is by using the supplied React component:
- Autoscroll
- Chat
- Classic
import { AutoscrollRunner } from "tripetto-runner-autoscroll";
import ReactDOM from "react-dom";
ReactDOM.render(
<AutoscrollRunner definition={/* Supply your form definition here */} />,
document.getElementById("root")
);
import { ChatRunner } from "tripetto-runner-chat";
import ReactDOM from "react-dom";
ReactDOM.render(
<ChatRunner definition={/* Supply your form definition here */} />,
document.getElementById("root")
);
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.
- Autoscroll
- Chat
- Classic
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>;
}
import { useRef, useEffect } from "react";
import { run } from "tripetto-runner-chat";
export function TripettoRunner({ definition }) {
const runnerElementRef = useRef();
useEffect(() => {
run({
element: runnerElementRef.current,
definition
});
}, [definition]);
return <div ref={runnerElementRef}></div>;
}
import { useRef, useEffect } from "react";
import { run } from "tripetto-runner-classic";
export function TripettoRunner({ definition }) {
const runnerElementRef = useRef();
useEffect(() => {
run({
element: runnerElementRef.current,
definition
});
}, [definition]);
return <div ref={runnerElementRef}></div>;
}
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.
- Autoscroll
- Chat
- Classic
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")
);
import { ChatRunner } from "tripetto-runner-chat";
import ReactDOM from "react-dom";
import { Export } from "tripetto-runner-foundation";
ReactDOM.render(
<ChatRunner
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")
);
import { ClassicRunner } from "tripetto-runner-autclassicoscroll";
import ReactDOM from "react-dom";
import { Export } from "tripetto-runner-foundation";
ReactDOM.render(
<ClassicRunner
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")
);
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â
- Autoscroll
- Chat
- Classic
Have a look at the complete autoscroll runner API reference for detailed documentation. In the examples above, the following React components, symbols were used:
Have a look at the complete chat runner API reference for detailed documentation. In the examples above, the following React components and symbols were used:
Have a look at the complete classic runner API reference for detailed documentation. In the examples above, the following React components and symbols were used:
âī¸ Up nextâ
Now you've got the basic implementation for the runner up and running, dive deeper into the following topics:
- đž Collecting response data
- đ¨ Style your forms
- đ Using fonts
- đĨī¸ Display modes
- đ Prefilling forms
- đĨ Runtime data usage
- â¯ī¸ Enable pause and resume
- đ§ Form data persistency
- đ File uploads
- đ Loading translations and locale data
- â Validating response data
- đ¤ Prevent form spamming
- đ Track usage
- đšī¸ Controlling the runner
- đ¸ Disable Tripetto branding
- đĄī¸ Content Security Policy
- đĻ Custom blocks
- đ Package overview