# react‑tetris2
[](https://www.npmjs.com/package/react-tetris2)
[](https://bundlephobia.com/package/react-tetris2)
[](#license)
> **react‑tetris2** – Plug-and-play `` component for **React 18+**, built with TypeScript.
> 🎮 **[Live Demo – Try Tetris2 here](https://ingenarte.github.io/react-tetris2/)** ⬅️
## ✨ Features
- **Fully typed API** – Strictly typed props and methods with TypeScript 5.
- **Modular architecture** – Use as a component with optional ref control.
- **Keyboard controls** – Playable entirely via keyboard input.
- **Imperative API** – Call `start()`, `restart()` via `ref` for external control.
## 🚀 Installation
```bash
# npm
npm i react-tetris2
# pnpm
pnpm add react-tetris2
```
> **Note:** `react` and `react-dom` are required as peer dependencies.
> Make sure your project includes them (React 18+ supported).
## 🤖 Quick start
Use the component right after installation — no additional setup required.
### Example: `main.tsx` (Vite)
> 💡 Make sure to **comment out global CSS imports** (e.g., `index.css`) to avoid style conflicts.
```tsx
// src/main.tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import Tetris2 from 'react-tetris2';
// import './index.css'; // optional: comment this out to avoid conflicts
createRoot(document.getElementById('root')!).render(
);
```
## 🔧 Customized usage
For advanced control and customization, use a `ref` and props:
```tsx
// src/main.tsx
import React, { StrictMode, useRef } from 'react';
import { createRoot } from 'react-dom/client';
import Tetris2, { Tetris2Handle } from 'react-tetris2';
function App() {
const game = useRef(null);
return (
<>
alert('Game Over!')}
onScoreChange={(score) => console.log('Score:', score)}
onLevelChange={(level) => console.log('Level:', level)}
/>