FlappyBirdLoader

A React component that renders a playable FlappyBird game. Perfect for loading screens, easter eggs, or just adding some fun to your application!

Installation

npm install flappybirdloader

or

yarn add flappybirdloader

or

pnpm add flappybirdloader

That's it! All assets are embedded in the package - no additional setup required. 🎉

Usage

Basic Usage

import FlappyBirdLoader from "flappybirdloader";

function App() {
  return (
    <div>
      <FlappyBirdLoader />
    </div>
  );
}

With Custom Size

import FlappyBirdLoader from "flappybirdloader";

function App() {
  return (
    <div>
      <FlappyBirdLoader width={600} height={400} />
    </div>
  );
}

With Callbacks

import FlappyBirdLoader from "flappybirdloader";

function App() {
  const handleScoreChange = (score: number) => {
    console.log("Current score:", score);
  };

  const handleGameOver = (score: number, bestScore: number) => {
    console.log("Game over! Score:", score, "Best:", bestScore);
  };

  return (
    <div>
      <FlappyBirdLoader
        onScoreChange={handleScoreChange}
        onGameOver={handleGameOver}
      />
    </div>
  );
}

As a Loading Screen

import { useState, useEffect } from "react";
import FlappyBirdLoader from "flappybirdloader";

function App() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Simulate loading
    setTimeout(() => setLoading(false), 5000);
  }, []);

  if (loading) {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "100vh",
        }}
      >
        <FlappyBirdLoader />
      </div>
    );
  }

  return <div>Your app content here</div>;
}

Next.js Usage

For Next.js applications with the App Router, you'll need to mark the component as client-side:

"use client";

import FlappyBirdLoader from "flappybirdloader";

export default function GamePage() {
  return (
    <div>
      <FlappyBirdLoader />
    </div>
  );
}

Or create a client component wrapper:

// components/FlappyBirdClient.tsx
"use client";

import FlappyBirdLoader from "flappybirdloader";

export default FlappyBirdLoader;

Then use it in your pages:

// app/page.tsx
import FlappyBirdClient from "@/components/FlappyBirdClient";

export default function Home() {
  return (
    <div>
      <FlappyBirdClient />
    </div>
  );
}

Props

| Prop | Type | Default | Description | | --------------- | -------------------------------------------- | ----------- | ------------------------------------- | | width | number | 800 | Width of the game canvas in pixels | | height | number | 512 | Height of the game canvas in pixels | | onScoreChange | (score: number) => void | undefined | Callback fired when the score changes | | onGameOver | (score: number, bestScore: number) => void | undefined | Callback fired when the game ends |

Controls

• Click on the canvas to make the bird jump
• Spacebar to make the bird jump
• Click "Play Again" after game over to restart

Features

• ✨ Fully playable FlappyBird game
• 🎮 Keyboard and mouse controls
• 🔊 Sound effects (can be muted by browser settings)
• 💾 Saves best score to localStorage
• 📱 Responsive to custom sizes
• ⚡ Zero dependencies (only React peer dependency)
• 🎨 Pixel-perfect graphics
• 🪝 Callback hooks for score tracking
• 📦 All assets embedded - no external files needed!

Browser Support

Works in all modern browsers that support:

• HTML5 Canvas
• ES6+
• React 16.8+ (Hooks)

Troubleshooting

Next.js specific issues

Remember to add "use client" directive at the top of your component file when using in Next.js App Router.

TypeScript errors

Make sure you have @types/react installed in your project.

License

MIT

Credits

Based on the classic FlappyBird game. All sprites and sounds are included in the package.