## Introduction
npm install react-nonogram-componentThis is a React component to display a Nonogram grid from the solution. Hints are automatically computed, and updated depending on the player moves.
![Nonogram][illustration-img]
Demo: https://qrcode-nonogram.netlify.app/
Npm package: https://www.npmjs.com/package/react-nonogram-component
bash
npm install react-nonogram-component
`$3
You need React > 17 in your dependencies.
$3
A simple nonogram grid of 3 rows / 4 columns: https://stackblitz.com/edit/react-ts-zftptv?file=index.tsx
`typescript
import { NonogramGrid } from "react-nonogram-component"
const solution = [
true, true, false, true,
true, false, true, true,
false, false, true, false,
];return
A demo project is under the
demo/ directory.$3
CSS can be overriden via CSS variables.
Here are the default values:
`css
--game-grid-color: #444;
--hint-font-family: monospace;
--hint-color: #000;
--hint-crossout-color: #bbb;
--hint-overflow-background: rgba(255, 0, 0, 0.1);
--game-board-background-color: #bbb;
--mouse-highlight-color: #f5e9e9;
--square-filled-background-color: #353235fa; # With transparency to display the mouse highlight
--square-empty-background-color: #fffffffa;
--square-marked-background-color: #fffffffa;
--square-marked-symbol-color: #bbb;
--square-marked-symbol: "\\2738";
`$3
rows: Number of rows of the gridcols: Number of columns of the gridsolution: the solution for the grid (1D array)`typescript
type Solution = (boolean | SquareValue.EMPTY | SquareValue.FILLED)[] // 1D array with all square values
`init: initial grid displayed to the player (1D array)`typescript
type Init = (SquareValue.EMPTY | SquareValue.FILLED | SquareValue.MARKED)[] // 1D array with all square values
`onRefresh: Event function: called each time the nonogram is refreshed. It allows the developer to interact with the grid.`typescript
function onRefresh(action: NonogramActions): voidexport interface NonogramActions {
canUndo: boolean // true if user can undo its last move, else false
canRedo: boolean // true if user can redo its last move, else false
undo: () => void // undo the last move
redo: () => void // redo the last move
restart: () => void // restart the game
setGridHidden: (hidden: boolean) => void // hide the borders of the grid
nextState: (grid: SquareValue[]) => void // set the next grid in history (1D array with all square values)
getProgress: () => number // get the progress of the game in % (value from 0 to 100)
getCurrentBoard: () => SquareValue[] // get the square values of the displayed board
}
`Build the lib
`bash
yarn build # one shot build
yarn watch # build when a file is modified (dev mode)
`Run the sample
`bash
cd sample/
yarn start
``[illustration-img]: https://raw.github.com/Marmau/react-nonogram-component/master/illustration.png