*NOTE: Due to a shortcoming in react-docgen, the methods exposed via useImperativeHandle() are not currently getting documented. Here’s the missing documentation that should be in “Props & Methods” above:*
| Method name | Parameters | Description |
|---|---|---|
focus() | (none) | Sets focus to the crossword component. |
reset() | (none) | Resets the entire crossword; clearing all answers in the grid and also any persisted data. |
fillAllAnswers() | (none) | Fills all the answers in the grid and calls the onLoadedCorrect callback with every answer. |
isCrosswordCorrect() | (none) | Returns whether the crossword is entirely correct or not. |
ACROSS
DOWN
See Clue input format for more details.
Player progress events
In addition to providing properties for styling, there are some properties to help your application “understand” the player’s progress:
| property | description |
|---|---|
onCorrect | callback function that fires when a player answers a clue correctly; called with (direction, number, answer) arguments, where direction is 'across' or 'down', number is the clue number as text (like '1'), and answer is the answer itself |
onLoadedCorrect | callback function that’s called when a crossword is loaded, to batch up correct answers loaded from storage; passed an array of the same values that onCorrect would recieve |
onCrosswordCorrect | callback function that’s called when the overall crossword is completely correct (or not) |
onCellChange | callback function called when a cell changes (e.g. when the user types a letter); passed the row and column and the character typed |
onClueSelected | callback function called when a clue is selected; passed the direction and the “number” |
Imperative methods
The following imperative methods can be called on a "ref" handle to the component:
| method name | parameters | description |
|---|---|---|
focus() | (none) | Sets focus to the crossword component. |
reset() | (none) | Resets the entire crossword; clearing all answers in the grid and also any persisted data. |
fillAllAnswers() | (none) | Fills all the answers in the grid and calls the onLoadedCorrect callback with every answer. |
isCrosswordCorrect() | (none) | Returns whether the crossword is entirely correct or not. |
setGuess(row, col, guess) | (row: number, col: number, guess: string) | Sets the “guess” value for a specific grid position. |
Clue direction labels
Providing the acrossLabel and/or downLabel properties will override the default "ACROSS" and "DOWN" used for the clues.
Lefty-righty
Upsie-downsie
Custom storage / multiple crosswords per-page
If you have more than one crossword at a given URL, you can use the storageKey property to provide a specific key under which to save the player's progress. (Just make sure to not set useStorage to false!)
Another example
Purely to show the grid rendering...