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