survey-tool-lib

Survey Tool Library

A powerful, flexible, and designer-friendly React survey library. Create beautiful surveys with a drag-and-drop builder, run them in your app, and export results with ease.

Features

🎨 Survey Creator

• Drag-and-Drop Interface: Easily add and arrange questions.
• Inline Editing: Click and type to edit titles and choices directly on the canvas.
• Logic Builder: Visual interface to set up "Visible If" conditional logic (e.g., show a question only if the previous answer was "Yes").
• Property Panel: Fine-tune question settings, names, and required flags.
• JSON Preview & Simulation: View the underlying JSON or test the survey in a built-in simulator.
• Real-time Updates: Sync survey state with your app using onJsonChange.

📝 Survey Runner

• Responsive Rendering: Automatically renders the survey based on the JSON model.
• Pagination: Supports multi-page surveys with "Next" and "Previous" navigation.
• Validation: Built-in required field validation.
• Conditional Visibility: Automatically evaluates logic rules to show/hide questions.
• Theming: Customizable brand color to match your application's design.

🛠 Supported Question Types

• Text: Single line input.
• Comment: Multi-line text area.
• Radiogroup: Single choice selection.
• Checkbox: Multiple choice selection.
• Dropdown: Select from a list.
• Boolean: Yes/No radio buttons.

Installation

npm install survey-tool-lib
# or
pnpm add survey-tool-lib
# or
yarn add survey-tool-lib

Usage Guide

1. Survey Creator (Builder)

Use the SurveyCreator component to let users build or edit surveys.

import { useState } from "react";
import { SurveyCreator } from "survey-tool-lib";
import "survey-tool-lib/style.css"; // Don't forget to import styles!

function CreatorPage() {
  const [surveyJson, setSurveyJson] = useState({
    title: "My New Survey",
    pages: [{ name: "page1", elements: [] }],
  });

  return (
    <div style={{ height: "100vh", width: "100%" }}>
      <SurveyCreator
        json={surveyJson}
        onSave={(finalJson) => console.log("Saved!", finalJson)}
        onJsonChange={(newJson) => setSurveyJson(newJson)} // Keep local state in sync
        brandColor="#007bff" // Customize the primary color
      />
    </div>
  );
}

2. Survey Runner (Renderer)

Use the Survey component and Model class to display and run the survey for end-users.

import { Survey, Model } from "survey-tool-lib";
import "survey-tool-lib/style.css";

const surveyJson = {
  title: "Customer Feedback",
  pages: [
    {
      name: "page1",
      elements: [
        {
          type: "text",
          name: "name",
          title: "What is your name?",
          isRequired: true,
        },
      ],
    },
  ],
};

function SurveyPage() {
  // 1. Create a Model instance
  const model = new Model(surveyJson);

  // 2. Define completion handler
  const handleComplete = (sender) => {
    // 'sender' is the Model instance
    const results = sender.data;
    console.log("Survey Results:", results);

    // You can also access the full JSON if needed
    // console.log("Survey Definition:", sender.json);
  };

  return (
    <div className="my-survey-container">
      <Survey model={model} onComplete={handleComplete} brandColor="#007bff" />
    </div>
  );
}

3. PDF Export

You can export survey definitions or results to PDF.

import { SurveyPDF } from "survey-tool-lib";

const handleExport = () => {
  // Use the SurveyPDF class (compatible with SurveyJS API)
  // 1. Instantiate with survey JSON (supports both full JSON or questions array)
  const surveyPdf = new SurveyPDF(surveyJson);

  // 2. Assign the results data
  surveyPdf.data = surveyResults;

  // 3. Save to PDF with a filename
  surveyPdf.save("survey_results.pdf");
};

Props & API

SurveyCreator Props

Prop	Type	Description
json	object	The initial survey JSON object.
onSave	function	Callback triggered when the "Save" button (if implemented) is clicked.
onJsonChange	function	Callback triggered whenever the survey structure changes.
brandColor	string	Hex color code for buttons and highlights.

Survey Props

Prop	Type	Description
model	Model	The survey model instance created with new Model(json).
onComplete	function	Callback triggered when the survey is completed. Receives the model instance as an argument.
brandColor	string	Hex color code for the "Complete" button and other accents.

Model Class

• constructor(json): Initializes the model.
• data: Getter for the current survey response data.
• setValue(name, value): Programmatically set a question value.
• getValue(name): Get a question value.
• validate(): Triggers validation for visible questions.

License

MIT