Skip to main content

Implement builder using React

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

✅ 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 install @tripetto/builder

📄 Basic implementation​

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

Run Try on CodeSandbox

📦 Loading blocks​

By default, the builder does not contain any blocks (question types). So, you must load the desired blocks. There is a specific guide about the different options for loading blocks. But as an example, you can load a set of stock blocks (blocks built and maintained by the Tripetto team) simply by importing them. The first step is to add these packages to your project:

npm install @tripetto/block-calculator @tripetto/block-checkbox @tripetto/block-checkboxes @tripetto/block-date @tripetto/block-device @tripetto/block-dropdown @tripetto/block-email @tripetto/block-error @tripetto/block-evaluate @tripetto/block-file-upload @tripetto/block-hidden-field @tripetto/block-mailer @tripetto/block-matrix @tripetto/block-multi-select @tripetto/block-multiple-choice @tripetto/block-number @tripetto/block-paragraph @tripetto/block-password @tripetto/block-phone-number @tripetto/block-picture-choice @tripetto/block-radiobuttons @tripetto/block-ranking @tripetto/block-rating @tripetto/block-regex @tripetto/block-scale @tripetto/block-setter @tripetto/block-signature @tripetto/block-statement @tripetto/block-stop @tripetto/block-text @tripetto/block-textarea @tripetto/block-url @tripetto/block-variable @tripetto/block-yes-no

Next, add imports to your code to load the appropriate blocks (the blocks will self-register and become available to the builder):

import { TripettoBuilder } from "@tripetto/builder/react";
// Load the blocks
import "@tripetto/block-calculator";
import "@tripetto/block-checkbox";
import "@tripetto/block-checkboxes";
import "@tripetto/block-date";
import "@tripetto/block-device";
import "@tripetto/block-dropdown";
import "@tripetto/block-email";
import "@tripetto/block-error";
import "@tripetto/block-evaluate";
import "@tripetto/block-file-upload";
import "@tripetto/block-hidden-field";
import "@tripetto/block-mailer";
import "@tripetto/block-matrix";
import "@tripetto/block-multi-select";
import "@tripetto/block-multiple-choice";
import "@tripetto/block-number";
import "@tripetto/block-paragraph";
import "@tripetto/block-password";
import "@tripetto/block-phone-number";
import "@tripetto/block-picture-choice";
import "@tripetto/block-radiobuttons";
import "@tripetto/block-ranking";
import "@tripetto/block-rating";
import "@tripetto/block-regex";
import "@tripetto/block-scale";
import "@tripetto/block-setter";
import "@tripetto/block-signature";
import "@tripetto/block-statement";
import "@tripetto/block-stop";
import "@tripetto/block-text";
import "@tripetto/block-textarea";
import "@tripetto/block-url";
import "@tripetto/block-variable";
import "@tripetto/block-yes-no";

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

Run Try on CodeSandbox

tip

The example above uses static imports for adding the stock block packages. It results in a code bundle that includes all the imported blocks. There is also an option to dynamically load blocks. That preserves JS bundle bloat. Please read the Block loading guide for more information about loading blocks.

🎞️ Video​

⏭️ Up next​

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

Loading and saving​

Miscellaneous​

Customization​