TBX Docs
ExercisesHooks

useFindWordsExercise

Word search exercise

Find hidden words by selecting cells. Tracks found words and selection; validates on release. Used by FindWords.

Key returns

PropertyDescription
displayGridGrid for rendering
wordResultsValidation result per word
selectedCellsCurrently selected cells
setSelectionSet selection state
commitSelectionValidate and commit selection
resetReset to initial state

Example

import { useFindWordsExercise } from '@bside-tech/tbx-ui/hooks';

// solutionGrid: letters = word cells; '' or ' ' = random filler
const solutionGrid = [
  ['C', 'A', 'T', ' '],
  [' ', ' ', ' ', ' '],
  ['D', 'O', 'G', ' '],
];

const words = [
  { startRow: 0, startCol: 0, direction: 'horizontal', solution: 'CAT' },
  { startRow: 2, startCol: 0, direction: 'horizontal', solution: 'DOG' },
];

const {
  displayGrid,
  wordResults,
  selectedCells,
  setSelection,
  clearSelection,
  commitSelection,
  reset,
} = useFindWordsExercise({
  solutionGrid,
  words,
  seed: 42,  // stable random letters for empty cells
});

// User drags from (0,0) to (0,2) to select "CAT"
setSelection([0, 0], [0, 2]);
commitSelection();  // validates selection, marks word found, clears selection

On this page