diff --git a/README.md b/README.md
index f0d9a46..538d93b 100644
--- a/README.md
+++ b/README.md
@@ -51,19 +51,20 @@ export default function MyPage() {
## Props
-| Property | Description |
-| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `allowedHtmlTags` | `string[]` = ['b', 'strong', 'i', 'em', 'sub', 'sup'] Optional list of HTML tags allowed within the clues. Use `[]` to prevent all HTML tags. Defaults to `['b', 'strong', 'i', 'em', 'sub', 'sup']`. |
-| `cellMatcher` | `RegExp` = '/[A-Z]/' Optional regular expression to match against entered cell characters. Defaults to `/[A-Z]/`. |
-| `className` | `string` Optional string to apply a space-delimited list of class names. |
-| `data` | `GuardianCrossword` Required object that contains crossword clues, solutions and other information needed to draw the grid. See [crossword data](#crossword-data) below for more information. |
-| `id` | `string` Required string to uniquely identify the crossword. |
-| `loadGrid` | `GuessGrid \| undefined` Optional object to override storage mechanism. Called when the component is initialized with the ID of the crossword. Should return an array-based representation of the crossword grid. See [guess grid](#guess-grid) below for more information. |
-| `onCellChange` | `(cellChange: CellChange) => void \| undefined` Optional function. Called after a grid cell has changed its guess. The object contains the properties `pos`, `guess` and `previousGuess`. |
-| `onCellFocus` | `(cellFocus: CellFocus) => void \| undefined` Optional function. Called after the focus switches to a new cell. The object returned contains the properties `pos` and `clueId`. |
-| `saveGrid` | `(value: GuessGrid \| ((val: GuessGrid) => GuessGrid)) => void \| undefined` Optional function to override storage mechanism. Called after the grid has changed with the ID of the crossword and array-based representation of the grid. See [guess grid](#guess-grid) below for more information. |
-| `stickyClue` | `'always' \| 'never' \| 'auto'` = 'auto' Optional value to define when to show the sticky clue above the grid. Defaults to `'auto'` (shown on `xs` and `sm` breakpoints). |
-| `theme` | `'red' \| 'pink' \| 'purple' \| 'deepPurple' \| 'indigo' \| 'blue' \| 'lightBlue' \| 'cyan' \| 'teal' \| 'green' \| 'deepOrange' \| 'blueGrey'` = 'blue' Optional value to override the main colour applied to the highlighted cells and clues. Defaults to `'blue'`. |
+| Property | Description |
+| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `allowedHtmlTags` | `string[]` = ['b', 'strong', 'i', 'em', 'sub', 'sup'] Optional list of HTML tags allowed within the clues. Use `[]` to prevent all HTML tags. Defaults to `['b', 'strong', 'i', 'em', 'sub', 'sup']`. |
+| `allowMissingSolutions` | `boolean` = false Optional flag to relax grid validation. This will allow the `data` prop to have missing or incomplete solutions in its entries. |
+| `cellMatcher` | `RegExp` = '/[A-Z]/' Optional regular expression to match against entered cell characters. Defaults to `/[A-Z]/`. |
+| `className` | `string` Optional string to apply a space-delimited list of class names. |
+| `data` | `GuardianCrossword` Required object that contains crossword clues, solutions and other information needed to draw the grid. See [crossword data](#crossword-data) below for more information. |
+| `id` | `string` Required string to uniquely identify the crossword. |
+| `loadGrid` | `GuessGrid \| undefined` Optional object to override storage mechanism. Called when the component is initialized with the ID of the crossword. Should return an array-based representation of the crossword grid. See [guess grid](#guess-grid) below for more information. |
+| `onCellChange` | `(cellChange: CellChange) => void \| undefined` Optional function. Called after a grid cell has changed its guess. The object contains the properties `pos`, `guess` and `previousGuess`. |
+| `onCellFocus` | `(cellFocus: CellFocus) => void \| undefined` Optional function. Called after the focus switches to a new cell. The object returned contains the properties `pos` and `clueId`. |
+| `saveGrid` | `(value: GuessGrid \| ((val: GuessGrid) => GuessGrid)) => void \| undefined` Optional function to override storage mechanism. Called after the grid has changed with the ID of the crossword and array-based representation of the grid. See [guess grid](#guess-grid) below for more information. |
+| `stickyClue` | `'always' \| 'never' \| 'auto'` = 'auto' Optional value to define when to show the sticky clue above the grid. Defaults to `'auto'` (shown on `xs` and `sm` breakpoints). |
+| `theme` | `'red' \| 'pink' \| 'purple' \| 'deepPurple' \| 'indigo' \| 'blue' \| 'lightBlue' \| 'cyan' \| 'teal' \| 'green' \| 'deepOrange' \| 'blueGrey'` = 'blue' Optional value to override the main colour applied to the highlighted cells and clues. Defaults to `'blue'`. |
For more type information, see [interfaces](./src/interfaces).
diff --git a/example/src/App.tsx b/example/src/App.tsx
index df7d9c1..244b736 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -4,26 +4,27 @@ import * as React from 'react';
import './App.css';
import data from './guardian.cryptic.28505';
+const ALLOWED_HTML_TAGS = ['b', 'strong', 'i', 'em', 'sub', 'sup'] as const;
+
// TODO: import from MyCrossword
-const themeColors = [
- 'red',
- 'pink',
- 'purple',
+const THEME_COLORS = [
+ 'blue',
+ 'blueGrey',
+ 'cyan',
+ 'deepOrange',
'deepPurple',
+ 'green',
'indigo',
- 'blue',
'lightBlue',
- 'cyan',
+ 'pink',
+ 'purple',
+ 'red',
'teal',
- 'green',
- 'deepOrange',
- 'blueGrey',
] as const;
-type Theme = typeof themeColors[number];
+type ThemeColor = typeof THEME_COLORS[number];
export default function App() {
- const allowedHtmlTags = ['b', 'strong', 'i', 'em', 'sub', 'sup'];
- const [theme, setTheme] = React.useState('blue');
+ const [theme, setTheme] = React.useState(THEME_COLORS[0]);
const [showDefinitions, setShowDefinitions] = React.useState(false);
return (
@@ -52,9 +53,9 @@ export default function App() {