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() {