Fill with React

useSurveyResponse() reads a response, constructs a SurveyJS Model from its stored definition, restores its data, and binds partial save and submit. Your application still renders the model with survey-react-ui.

npm i @dimah-survey/react react survey-core survey-react-ui

"use client";

import dynamic from "next/dynamic";
import { createFillClient, useSurveyResponse } from "@dimah-survey/react";

import "survey-core/survey-core.min.css";

const Survey = dynamic(
  () => import("survey-react-ui").then((mod) => mod.Survey),
  { ssr: false },
);

const client = createFillClient({ baseURL: "/api/survey" });

export function Fill({ responseId }: { responseId: string }) {
  const { model, error, saveError, stale, reload } = useSurveyResponse({
    client,
    responseId,
  });

  if (error) return <p>{error.message}</p>;
  if (!model) return null;

  return (
    <>
      {saveError ? <p>{saveError.message}</p> : null}
      {stale ? <button onClick={reload}>Reload</button> : null}
      <Survey model={model} />
    </>
  );
}

SurveyJS UI components require a browser, so Next.js applications should load <Survey> dynamically. A submitted or abandoned response opens in display mode and sends no writes.

OptionsCopy Anchor Link

import type { UseSurveyResponseOptions } from "@dimah-survey/react";

Handle stateCopy Anchor Link

import type { SurveyResponseBinding } from "@dimah-survey/react";

Completion waits for the server. If submit fails, SurveyJS does not complete and the respondent keeps their mounted model.

Each partial save sends the complete survey.data object; it is not a key-level patch.

Writes are queued. Each one sends expectedUpdatedAt from the last successful read. See Responses.

Bind an existing modelCopy Anchor Link

Use bindSurveyModel() when your application already owns the Model. useSurveyResponse() is the load plus that binding.

import { bindSurveyModel } from "@dimah-survey/react";

const dispose = bindSurveyModel(model, {
  savePartial: (data) => client.savePartial({ id, data, expectedUpdatedAt }),
  submit: (data) => client.submitResponse({ id, data, expectedUpdatedAt }),
  onWriteError: (error) => {
    console.error(error);
  },
});

import type {
  SurveyModelActions,
  SurveyModelBindOptions,
} from "@dimah-survey/react";

Call dispose on unmount. It removes the SurveyJS handlers it added.

bindSurveyModel also sets storeDataAsText to false on file and signature questions, including questions added later.

Keep file storage in your appCopy Anchor Link

File bytes stay in your application. There is no upload route.

Handle onUploadFiles, onDownloadFile, and onClearFiles on the Model. Give SurveyJS { file, content } where content is your URL. Partial save writes that locator into data. The binding does not store the bytes.

Start with the Quickstart for the complete load and render flow. Creator autosave uses a separate binding described in Survey Creator.