Usage with React

Starting with Tripetto is very easy when you are using React. Depending on your project's requirements there are two main Tripetto components to implement:

• Form Runner component to run forms and collect responses. It handles form execution (including complex logic and response collection), form UI and form UX. Form respondents filling out a form are working in a runner;
• Form Builder component to create forms. It is a visual UI component that allows building smart flowing forms and surveys like flowcharts in the browser. End users who edit forms are working in the builder.

🏃 Add a form to your React app

To add a form to your app, you first need to create a form. To do so, you can use the Tripetto Studio web app or add the form builder to your app (in case you want to allow users to create forms inside your app). Next, add the React component of one of the stock runners to your project and supply the form definition of your form to it.

1️⃣ Add packages to your project

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

Autoscroll

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

Chat

npm install @tripetto/runner-chat @tripetto/runner

Classic

npm install @tripetto/runner-classic @tripetto/runner

2️⃣ Implement runner component

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

Autoscroll

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

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

Chat

import { ChatRunner } from "@tripetto/runner-chat";

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

Classic

import { ClassicRunner } from "@tripetto/runner-classic";

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

▶️ Learn more

🏗️ Add the form builder to your React app

The Tripetto builder package comes with a built-in React component. This makes it very easy to use the builder in a React application.

1️⃣ Add package to your project

First of all, you need to add the Tripetto builder package to your project. This package is published on npm. To do so, run the following command:

npm

npm install @tripetto/builder

Yarn

yarn add @tripetto/builder

pnpm

pnpm add @tripetto/builder

2️⃣ Implement builder component

The next step is to import the TripettoBuilder React component. This component is located in a subfolder named react inside the builder package. So make sure, to use the right import statement to import it. Here's an example:

import { TripettoBuilder } from "@tripetto/builder/react";

function ExampleApp() {
  return (
    <div>
      <h1>Example app</h1>
      <TripettoBuilder />
    </div>
  );
}

▶️ Learn more