# react-card-memory-game

> Memory Game made with React using UTF-8 icons.

Latest version **1.1.6** (published 2023-09-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-card-memory-game
pnpm add react-card-memory-game
yarn add react-card-memory-game
bun add react-card-memory-game
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2023-09-17 |
| First published | 2022-12-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 13.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Emanuele Caurio |
| Maintainers | minu1994 |
| Keywords | react, game, react-game, react-memory-game, react-card-memory-game, UTF-8 icons |

## Links

- npm: https://www.npmjs.com/package/react-card-memory-game
- Repository: https://github.com/minu1994/react-card-memory-game
- Homepage: https://github.com/minu1994/react-card-memory-game#readme
- Issues: https://github.com/minu1994/react-card-memory-game/issues
- npm.io page: https://npm.io/package/react-card-memory-game

## Dependencies (1)

- [reactjs-flip-card](https://npm.io/package/reactjs-flip-card.md) ^1.0.81

## 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

- 1.1.6 (latest) — 2023-09-17
- 1.1.5 — 2022-12-28
- 1.1.4 — 2022-12-26
- 1.1.3 — 2022-12-17
- 1.1.2 — 2022-12-12
- 1.1.1 — 2022-12-12
- 1.1.0 — 2022-12-10
- 1.0.0 — 2022-12-09

## README

# React Card Memory Game
<img alt="npm bundle size" src="https://img.shields.io/bundlephobia/min/react-card-memory-game?color=g"> <img alt="Snyk Vulnerabilities for npm package" src="https://img.shields.io/snyk/vulnerabilities/npm/react-card-memory-game?color=g">

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`:

```sh
npm install react-card-memory-game
```

```sh
yarn add react-card-memory-game
```

## 💻 Demo
[Live Demo](https://react-card-memory-game.surge.sh/)

##  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

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

<br/>

## License
MIT

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