@tour-kit/surveysHeadless
HeadlessSurvey
Render-prop wrapper around useSurvey — exposes full survey state and actions without rendering any DOM elements
domidex01Published
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
Prop
Type
Related
- useSurvey — The hook this component wraps
- HeadlessQuestionRating
- Headless overview — Import path details
Ship onboarding, not config.
npm i @tour-kit/core is free while you build. Every package works unlicensed in development, a one-time licence from $9.99 removes the production watermark when you ship.
Free in development, no signup, no credit card. Pay once, only when you ship.