HeadlessSurvey

Render-prop wrapper around useSurvey — exposes full survey state and actions without rendering any DOM elements

HeadlessSurvey calls useSurvey internally and passes the result to the children render prop. Use it to access survey state deep in a component tree where calling the hook directly would require prop drilling.

Import

import { HeadlessSurvey } from '@tour-kit/surveys/headless';

Usage

import { HeadlessSurvey, HeadlessQuestionRating } from '@tour-kit/surveys/headless';

function CustomNPSSurvey() {
  return (
    <HeadlessSurvey surveyId="nps-q1">
      {({ state, config, canShow, show, answer, complete }) => {
        if (!state?.isVisible) {
          return (
            <button onClick={show} disabled={!canShow}>
              Give feedback
            </button>
          );
        }

        return (
          <div className="my-custom-modal">
            <h2>{config?.title}</h2>
            <HeadlessQuestionRating
              id="score"
              label="Rate us 0–10"
              min={0}
              max={10}
              onChange={(value) => {
                answer('score', value);
                complete();
              }}
            >
              {({ options, ratingGroupProps, getOptionProps }) => (
                <div {...ratingGroupProps} className="flex gap-2">
                  {options.map((opt) => (
                    <button
                      key={opt}
                      {...getOptionProps(opt)}
                      className="rounded px-3 py-2 border"
                    >
                      {opt}
                    </button>
                  ))}
                </div>
              )}
            </HeadlessQuestionRating>
          </div>
        );
      }}
    </HeadlessSurvey>
  );
}

Props

Prop

Type

Render prop shape