Skip to main content

Implement builder using React

If you use React you can easily wrap the Tripetto form builder into a React component. This makes it possible to use the builder in a React application.

✅ 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

📄 Basic implementation

To use the builder in a React application, you can create a simple wrapper component using hooks. This wrapper component passes a reference of the element of the component to a builder instance that is only created once when the component renders for the first time. You can easily achieve that with useRef as shown in the following example:

TripettoBuilderComponent.jsx
import React, { useEffect, useRef } from "react";
import { Builder } from "tripetto";

function TripettoBuilder({ definition, onSave }) {
// This ref is for the HTML element
const elementRef = useRef();
// This ref is for the builder instance
const builderRef = useRef();

useEffect(() => {
// When there is no builder instance active, create one!
if (!builderRef.current) {
builderRef.current = Builder.open(definition, {
element: elementRef.current,

// When the definition is saved, emit an event.
onSave
});
}

// No need for cleanup, the builder instance will be destroyed automagically when the host element is removed from the DOM.
}, []);

return (<div ref={elementRef}></div>);
}

Run Try on CodePen

info

You need to monitor screen resizes and inform the builder when the dimensions of the viewport change. Read this guide for more information and help.

danger

Make sure to set the position style attribute of the element used to render the builder to absolute, relative, fixed, or sticky. Otherwise, it is possible that the builder displays outside of the element boundaries.

👩‍💻 Use the component

The code above defines a simple React component named TripettoBuilder. You can use it like any other React component. The wrapper component accepts two props:

  • definition: Specifies the form definition to load;
  • onSave: Specifies a callback function that is invoked when the save button in the builder is clicked.

If you want to render the builder, you could now use this code:

import { createRoot } from "react-dom/client";

const root = createRoot(document.getElementById("root"));

root.render(
<TripettoBuilder onSave={(definition) => {
console.log("Form saved!");

// Do something with the form definition
console.dir(definition);
}}/>
);

📦 Loading blocks

By default, the builder does not contain any blocks (question types). So, you need to load the desired blocks. There is a specific guide about the different options for loading blocks. But as an example, you can extend the wrapper component and 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-multiple-choice tripetto-block-number tripetto-block-paragraph tripetto-block-password tripetto-block-phone-number tripetto-block-picture-choice tripetto-block-radiobuttons tripetto-block-rating tripetto-block-regex tripetto-block-scale tripetto-block-setter tripetto-block-statement tripetto-block-stop tripetto-block-text tripetto-block-textarea tripetto-block-url tripetto-block-variable tripetto-block-yes-no @tripetto/block-multi-select

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

TripettoBuilderComponent.jsx
import React, { useEffect, useRef } from "react";
import { Builder } from "tripetto";

// 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-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-rating";
import "tripetto-block-regex";
import "tripetto-block-scale";
import "tripetto-block-setter";
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";
import "@tripetto/block-multi-select";

function TripettoBuilder({ definition, onSave }) {
const elementRef = useRef();
const builderRef = useRef();

useEffect(() => {
if (!builderRef.current) {
builderRef.current = Builder.open(definition, {
element: elementRef.current,
onSave
});
}
}, []);

return (<div ref={elementRef}></div>);
}

Run Try on CodePen

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.

⏭️ 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