React-card-memory-game NPM

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