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 { generateSurveyPDF } from "survey-tool-lib";

// ... inside your component
const handleExport = () => {
  // Pass the model (which contains both JSON and data) and a filename
  generateSurveyPDF(model, "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