Nautical Poseidon Mythology
Wondering what’s next for npm?Check out our public roadmap! »

tripetto-runner-classic
TypeScript icon, indicating that this package has built-in type declarations

2.0.1 • Public • Published

Tripetto

Tripetto is a full-fledged form kit. Rapidly build and run smart flowing forms and surveys. Drop the kit in your codebase and use all of it or just the parts you need. The visual builder is for form building, and the runners are for running those forms in different UI variants. It is entirely extendible and customizable. Anyone can build their own building blocks (e.g., question types) or runner UI's.

Classic runner

Version License Downloads Pipeline status Follow us on Twitter

Purpose

This package is a classic form UI for running Tripetto forms and surveys. In this UI the questions and elements (so called blocks) are displayed in a traditional way.

Try the demo

Get started

There a multiple options how you can use this runner. From plain old HTML to React or using imports.

Option A: Embed in HTML using CDN

You need to import the runner foundation script and the classic runner script:

<script src="https://unpkg.com/tripetto-runner-foundation"></script>
<script src="https://unpkg.com/tripetto-runner-classic"></script>
<script>
TripettoClassic.run({
    definition: /** Supply a form definition here. */,
    onSubmit: function(instance) {
      // Implement your response handler here.

      // For this example we output all exportable fields to the browser console
      console.dir(TripettoRunner.Export.exportables(instance));

      // Or output the data in CSV-format
      console.dir(TripettoRunner.Export.CSV(instance));
    }
});
</script>

Try demo on CodePen

Option B: Using React

  1. Install the required packages from npm:
$ npm install tripetto-runner-foundation tripetto-runner-classic tripetto-runner-react-hook react react-dom
  1. Use the React component:
import React from "react";
import ReactDOM from "react-dom";
import { ClassicRunner } from "tripetto-runner-classic";
import { Export } from "tripetto-runner-foundation";

ReactDOM.render(
  <ClassicRunner
    definition={/** Supply a form definition here. */}
    onSubmit={instance => {
      // Implement your response handler here.

      // For this example we output all exportable fields to the browser console
      console.dir(Export.exportables(instance));

      // Or output the data in CSV-format
      console.dir(Export.CSV(instance));
    }}
    />,
  document.getElementById("your-element")
);

Option C: Import from npm

  1. Install the required packages from npm:
$ npm install tripetto-runner-foundation tripetto-runner-classic tripetto-runner-react-hook react react-dom
  1. Import the runner:
import { run } from "tripetto-runner-classic";
import { Export } from "tripetto-runner-foundation";

run({
    definition: /** Supply a form definition here. */,
    onSubmit: instance => {
      // Implement your response handler here.

      // For this example we output all exportable fields to the browser console
      console.dir(Export.exportables(instance));

      // Or output the data in CSV-format
      console.dir(Export.CSV(instance));
    }
});

Documentation

The complete Tripetto documentation can be found at docs.tripetto.com.

Support

Run into issues or bugs? Report them here and we'll look into them.

For general support contact us at support@tripetto.com. We're more than happy to assist you.

About us

If you want to learn more about Tripetto or contribute in any way, visit us at Tripetto.com.

Install

npm i tripetto-runner-classic

DownloadsWeekly Downloads

294

Version

2.0.1

License

MIT

Unpacked Size

3.97 MB

Total Files

19

Last publish

Collaborators

  • avatar