# reactjs-chessboard

> chessboard component based on react-chessboardjs

Latest version **0.0.9** (published 2018-06-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install reactjs-chessboard
pnpm add reactjs-chessboard
yarn add reactjs-chessboard
bun add reactjs-chessboard
```

## 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.0.9 |
| Published | 2018-06-29 |
| First published | 2018-05-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 124.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Andrew Gingrich |
| Maintainers | andrewgi |
| Keywords | react, chess, chessboard |

## Links

- npm: https://www.npmjs.com/package/reactjs-chessboard
- Repository: https://github.com/ajGingrich/react-chessboard
- Homepage: https://github.com/ajGingrich/react-chessboard#readme
- Issues: https://github.com/ajGingrich/react-chessboard/issues
- npm.io page: https://npm.io/package/reactjs-chessboard

## Dependencies (8)

- [uuid](https://npm.io/package/uuid.md) ^3.2.1
- [react](https://npm.io/package/react.md) ^16.4.0
- [redux](https://npm.io/package/redux.md) ^3.7.2
- [react-dom](https://npm.io/package/react-dom.md) ^16.4.0
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.1
- [react-redux](https://npm.io/package/react-redux.md) ^5.0.7
- [redux-thunk](https://npm.io/package/redux-thunk.md) ^2.2.0

## 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.0.9 (latest) — 2018-06-29
- 0.0.8 — 2018-06-20
- 0.0.7 — 2018-06-20
- 0.0.6 — 2018-06-14
- 0.0.5 — 2018-06-08
- 0.0.4 — 2018-06-05
- 0.0.3 — 2018-06-05
- 0.0.2 — 2018-06-02
- 0.0.1 — 2018-05-26

## README

Fork from [react-chessboardjs](https://github.com/siansell/react-chessboardjs)

There are several major differences react-chessboardjs

* Images are imported dynamically and loaded directly into the bundle. This elimnates need for next-images or further configuration
* Board is not draggable which reduces the bundle size considerably.
* There are no piece themes in order to minimize bundle size
* The last move can be highlighted as an active square

## Installation

```
npm install reactjs-chessboard --save
```

## Usage

```
import Chessboard from 'reacjs-chessboard'

class Example extends React.Component {

  render() {
    return (
      <Chessboard
        blackSquareColour="steelblue"
        whiteSquareColour="white"
        width={600}
        style={{
          border: '2px solid lightgrey',
        }}
        orientation="b"
      />
      )
  }
}
```

## Properties

| Prop | Type | Default | Explanation |
| --- | :---: | :------: | :-------: |
| activeSquare | string | null | The last square that has been moved for highlight, ex. e4 |
| blackSquareColor | string | SteelBlue | color of the dark squares |
| whiteSquareColor | string | AliceBlue | color of the light squares |
| orientation | string | 'w' | board orientation |
| style | object | - | boarder border style |
| width | string (%) or number (px) | 600 | Width of the board and move list. The board will be 2/3rds of the width. |
| showCoordinates | boolean | true | should show coordinates along the A file and first Rank |

## Contributing

To run the examples:

```
npm install
npm run dev

# copy index.html from examples into the dist folder
```

Then open `localhost:8020` in a browser.

Tested with React 16.3

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