react-chess-pieces

react-chess-pieces

Just a little np module to give you react svg chess pieces

do with them what you please!

getting stahted

$ npm i -S react-chess-pieces

OR

$ yarn add react-chess-pieces

then (eg in a created react app)

we can use the default export (a Component called Piece)

import React, { Component } from 'react';
import './App.css';

import Piece from 'react-chess-pieces';

const initialPosition = [
  ["R", "N", "B", "Q", "K", "B", "N", "R"],
  ["P", "P", "P", "P", "P", "P", "P", "P"],
  ["", "", "", "", "", "", "", ""],
  ["", "", "", "", "", "", "", ""],
  ["", "", "", "", "", "", "", ""],
  ["", "", "", "", "", "", "", ""],
  ["p", "p", "p", "p", "p", "p", "p", "p"],
  ["r", "n", "b", "q", "k", "b", "n", "r"]
];


class App extends Component {

  state = {
    pieces: initialPosition,
  }
  
  render() {
    return (
      <div className="App">
        <div className='Board'>
          {this.state.pieces.map((rowOfPieces, rowIndex)=> (
            <div key={rowIndex+'row'} className='Row'>
              {rowOfPieces.map( (piece, colIndex)=> (
                <div key={rowIndex+'row'+colIndex+'col'} className='Square'>
                  <Piece piece={piece}/>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    );
  }
}

export default App;

the Piece Component renders into an unstyled svg, so you should be able to style it however you please

all svg are available by direct import as well via /dist/svg-index

this example is missing all the CSS - if you want to learn how to build a chessboard in react checkout my workshop here

original sprite svg:

https://commons.wikimedia.org/wiki/File:Chess_Pieces_Sprite.svg

I have edited them lightly for cultural reasons

originally licensed under the Creative Commons Attribution-Share Alike 3.0 Unported license, which I think is okay to republish as ISC.