useMeBookQuestion

Location: src/hooks/useMeBookQuestion.js

Overview

Provides a unified interface for managing a single MeBook question's response. Supports multiple question types: single-select, multi-select, spectrum/slider, toggle, free text, and drag-arrange. Pulls its data from the MeBookContext and returns memoized helpers for reading and writing the current response.

This hook depends on the MeBookContext provider being present in the component tree.

Signature

function useMeBookQuestion(
  questionId: string
): {
  // Data
  options: MeBookOption[],
  value: any,
  customText: string | undefined,
  hasResponse: boolean,

  // Single/multi select
  setValue: (value: any) => void,
  setCustomText: (text: string) => void,
  toggleOption: (optionValue: string) => void,
  isSelected: (optionValue: string) => boolean,

  // Spectrum/slider
  setSpectrumValue: (numericValue: number) => void,

  // Toggle
  toggleValue: () => void,
  isToggled: boolean,

  // Drag arrange
  setOrderedValues: (orderedArray: any[]) => void
}

Parameters

Parameter	Type	Required	Description
questionId	string	Yes	The ID of the MeBook question to manage.

Return Value

Property	Type	Description
options	MeBookOption[]	The available options for this question (from context). Empty array if none.
value	any	The current response value. Can be a string, number, boolean, or array depending on question type.
customText	string | undefined	Optional custom text the user has entered alongside their selection.
hasResponse	boolean	true if the user has provided any response (value is not null or undefined).
setValue	(value: any) => void	Set the response value directly. Preserves existing customText.
setCustomText	(text: string) => void	Set the custom text field. Preserves existing value.
toggleOption	(optionValue: string) => void	Toggle a specific option in a multi-select question. Adds if absent, removes if present.
isSelected	(optionValue: string) => boolean	Check whether a specific option value is currently selected (works for both single and multi-select).
setSpectrumValue	(numericValue: number) => void	Set a numeric value for spectrum/slider questions.
toggleValue	() => void	Toggle a boolean value (for toggle-type questions).
isToggled	boolean	Whether the current value is truthy (for toggle-type questions).
setOrderedValues	(orderedArray: any[]) => void	Set an ordered array of values (for drag-arrange questions).

Usage

function MultiSelectQuestion({ questionId }) {
  const { options, toggleOption, isSelected, hasResponse } = useMeBookQuestion(questionId);

  return (
    <div>
      {options.map(opt => (
        <button
          key={opt.value}
          className={isSelected(opt.value) ? 'selected' : ''}
          onClick={() => toggleOption(opt.value)}
        >
          {opt.label}
        </button>
      ))}
      {hasResponse && <span>Response saved</span>}
    </div>
  );
}

Spectrum question

function SpectrumQuestion({ questionId }) {
  const { value, setSpectrumValue } = useMeBookQuestion(questionId);

  return (
    <input
      type="range"
      min={0}
      max={100}
      value={value || 50}
      onChange={(e) => setSpectrumValue(Number(e.target.value))}
    />
  );
}

---

Last updated: 2026-02-07