@crosswordxyz/react-crossword

A flexible, responsive, and easy-to-use crossword component for React apps. Fork of @jaredreisinger/react-crossword (MIT license), maintained for use at crossword.xyz.

Requires: React 18, react-dom 18, Node >= 18.7.0

Install

npm install @crosswordxyz/react-crossword

styled-components is a production dependency and will be installed automatically. A ThemeProvider is re-exported from this package so you don't need to depend on styled-components directly.

Usage

import Crossword from '@crosswordxyz/react-crossword';

const data = {
  across: {
    1: { clue: 'one plus one', answer: 'TWO', row: 0, col: 0 },
  },
  down: {
    2: { clue: 'three minus two', answer: 'ONE', row: 0, col: 2 },
  },
};

export default function MyPage() {
  return <Crossword data={data} />;
}

IPUZ support

The useIpuz() hook converts IPUZ-format puzzle data into the native CluesInput format:

import Crossword from '@crosswordxyz/react-crossword';
import { useIpuz } from '@crosswordxyz/react-crossword';

const data = useIpuz(ipuzPuzzle);
if (data) {
  return <Crossword data={data} />;
}

Utility sub-export

Grid data helpers are available from a separate entry point:

import { createGridData, loadGuesses, saveGuesses, clearGuesses } from '@crosswordxyz/react-crossword/util';

Styling, events, and imperative methods

See the upstream README for full documentation on theming (ThemeProvider), CSS class names, player progress callbacks, and imperative ref methods (focus(), reset(), fillAllAnswers(), isCrosswordCorrect(), setGuess()).

Development

yarn install
yarn build       # TypeScript compilation
yarn lint        # ESLint
yarn test        # Jest (134 tests)
yarn test:dev    # Jest watch mode

Publishing

npm publish --otp=<code>

publishConfig.access in package.json is set to "public", so no --access flag is needed.

License

MIT