React Card Memory Game

Memory Game made with React using UTF-8 icons.

Mobile & Desktop ready!

works with: React >= 16.8

✔️ Getting Started

You can install the module via npm or yarn:

npm install react-card-memory-game

yarn add react-card-memory-game

💻 Demo

Live Demo

Project Structure

The project includes a demo folder initialized with Create React App.

When you run the command build from first-level package.json, a dist and a lib folder will be generated.

The lib folder will be placed automatically into the demo project.

You can move into demo directory and start project from its own package.json script, just like any other Create React App.

Usage

import MemoryGame from 'react-card-memory-game'

function App() {
    return (
       <div>
           <MemoryGame gridNumber={4}/>
       </div>
    );
}

This is the bare minimum to have a working memory game.

A more in-depth example is available on demo/src/App.js

Props

Name	Type	Default	Description
containerStyle	`CSSProperties`	`{}`	Optional style applied to the container
gridNumber	`number`	required	The grid number. Must be an Integer number between 4 and 6
foundPair	`Function`	`()=>undefined`	Optional callback triggered everytime the player find a pair
notFoundPair	`Function`	`()=>undefined`	Optional callback triggered everytime the player do not find a pair
gameFinished	`Function`	`()=>undefined`	Optional callback triggered when the game is finished (all pairs found)
holeCardsColor	`string`	`'orange'`	The color applied to the cards
foundCardsColor	`string`	`'yellow'`	The color applied to the successfully discovered cards
frontCardsCss	`string`	`''`	Optional `className` applied to the front of the cards
backCardsCss	`string`	`''`	Optional `className` applied to the back of the cards

License

MIT