FindWords

FindWords renders a word search grid where words are hidden horizontally or vertically. Empty cells in the grid definition are filled with random letters. Users click or click-drag to select cells; when the selection matches a defined word, it is marked as found.

Import

import { FindWords } from '@bside-tech/tbx-ui/components';

Example

C	A	T	D	E
A	G	H	I	J
R	L	M	N	O
P	Q	D	O	G
U	V	W	X	Y

<FindWords
  grid={[
    ["C", "A", "T", "", ""],
    ["A", "", "", "", ""],
    ["R", "", "", "", ""],
    ["", "", "D", "O", "G"],
    ["", "", "", "", ""],
  ]}
  words={[
    { startRow: 0, startCol: 0, direction: "horizontal", solution: "CAT" },
    { startRow: 0, startCol: 0, direction: "vertical", solution: "CAR" },
    { startRow: 3, startCol: 2, direction: "horizontal", solution: "DOG" },
  ]}
/>

Grid format

The grid is a 2D array of strings, similar to Crosswords:

Letter — Cell that is part of a hidden word (shows that letter).
'' or ' ' — Empty cell (filled with a random letter at render time).

Words format

Each word entry describes one hidden word:

Field	Type	Description
`startRow`	number	Row index where the word starts
`startCol`	number	Column index where the word starts
`direction`	`'horizontal' \| 'vertical'`	Word orientation
`solution`	string	The word text (for validation)

Props

Prop

Type

Labels

Override button and time labels via the labels prop:

<FindWords
  grid={grid}
  words={words}
  labels={{
    reset: "Ripristina",
    time: "Tempo:",
  }}
/>

Style

Tailwind v4 is available for customisations. Pass classes via the classNames prop, or override CSS variables for fine-grained control.

CSS Classes

Key	Element
`root`	Root wrapper
`grid`	Letter grid table
`cell`	Each cell
`wordList`	Word list (legend) container
`wordItem`	Each word in the legend
`resetButton`	Reset button
`time`	Time display wrapper

CSS Variables

Scoped under .tbx-findwords:

Variable	Purpose
`--findwords-cell-size`	Cell width and height (default `2rem`, can be overridden by `cellSize` prop)
`--findwords-cell-bg`	Cell background
`--findwords-cell-border`	Cell border
`--findwords-cell-text`	Cell letter color
`--findwords-cell-selected`	Cell when selected (click/drag)
`--findwords-cell-found`	Cell when word is found (correct)
`--exercise-action-bg`, `--exercise-action-border`	Reset button
`--exercise-result-neutral`, `--exercise-result-correct`, `--exercise-result-wrong`	Results text

Found words in the legend use --exercise-accent-color for text. Time display uses --exercise-accent-color when words have been found. Content uses --exercise-layout-content-font-size. Icon color follows --exercise-layout-icon-color.

Interaction

Click on a word cell to select it.
Click and drag across cells to select a horizontal or vertical line. Release to check: if the selection (forward or reverse) matches a word, it is marked as found.
Found words are highlighted green and crossed off the word list.
Use Reset to clear found words and try again.

Hook

Use useFindWordsExercise when building custom word search interfaces:

import { useFindWordsExercise } from "@bside-tech/tbx-ui/hooks";
import type { FindWordsEntry } from "@bside-tech/tbx-ui/hooks";

const {
  displayGrid,
  wordResults,
  selectedCells,
  isCorrect,
  setSelection,
  clearSelection,
  commitSelection,
  reset,
  getWordId,
} = useFindWordsExercise({
  solutionGrid: grid,
  words: words,
  seed: 0,
});

FindWords

On this page