# react-chessboardjs-wrapper

> A React wrapper for chessboard.js

Latest version **0.4.2** (published 2018-12-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-chessboardjs-wrapper
pnpm add react-chessboardjs-wrapper
yarn add react-chessboardjs-wrapper
bun add react-chessboardjs-wrapper
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.2 |
| Published | 2018-12-11 |
| First published | 2018-07-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 74.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Simon Ansell |
| Maintainers | siansell |
| Keywords | react, chess, chessboard |

## Links

- npm: https://www.npmjs.com/package/react-chessboardjs-wrapper
- Repository: https://github.com/siansell/react-chessboardjs-wrapper
- Issues: https://github.com/siansell/react-chessboardjs-wrapper/issues
- npm.io page: https://npm.io/package/react-chessboardjs-wrapper

## Dependencies (4)

- [uuid](https://npm.io/package/uuid.md) ^3.2.1
- [react](https://npm.io/package/react.md) ^16.6.3
- [react-dom](https://npm.io/package/react-dom.md) ^16.6.3
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.4.2 (latest) — 2018-12-11
- 0.4.1 — 2018-10-17
- 0.4.0 — 2018-10-17
- 0.3.2 — 2018-09-07
- 0.3.1 — 2018-07-30
- 0.3.0 — 2018-07-30
- 0.2.0 — 2018-07-23

## README

**WIP** Early stages.

A React wrapper for [chessboard.js](http://chessboardjs.com). Requires chessboard.js and jQuery to be available on the window object.

### Usage

`yarn add react-chessboardjs-wrapper`

```jsx
import ChessboardJs from 'react-chessboardjs-wrapper'

<ChessboardJs
  animate // boolean, chessboard.js piece animations
  blackSquareColour="steelblue" // or hex
  border="10px solid #d3d3d3" // css border property
  config={config} // The chessboard.js config object
  onInitBoard={(board, boardId) => this._board = board} // callback fn, gets passed the chessboard.js board object, and the unique id
  resize // effective if width prop is a string
  showPromotionDialog={ // falsey, or object as shown
    onSelect: piece => { // callback function, runs when a piece is selected
      console.log(piece)
      this.setState({
        showPromotionDialog: false,
      })
    },
    square: 'e8', // the square the select piece dialog appears on
  }
  whiteSquareColour="aliceblue" // or hex
  width="80%" // string (%) || number (px)
/>
```

### Notes:

- Changing all props **WITH THE EXCEPTION OF THE FOLLOWING** means a full recreation of the board (as only these are settable via the chessboard.js API):
  - `animate`
  - `blackSquareColour`
  - `border`
  - `config.position`
  - `config.orientation`
  - `resize`
  - `showPromotionDialog`
  - `whiteSquareColour`

- This wrapper is optimised for a modified chessboard.js, based on [chessboard.js PR 97](https://github.com/oakmac/chessboardjs/pull/97) which supports image caching. If using the non-modified published chessboard.js, it works anyway (falls back). fixes flickering in Safari (somewhat, it is still not perfect).
- chessboard.js `config.showErrors` doesn't seem to work as advertised?
- Is chessboard.js is no longer maintained?

### Examples

TODO

### Dev

We use [rollup.js](https://rollupjs.org/guide/en). `yarn dev` to watch files and rebuild on changes, `yarn build` to build.

### Tests

TODO, but I need to learn myself some React testing libs.

---
_Source: https://npm.io/package/react-chessboardjs-wrapper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._