🧩 Pixabee 🐝

Pixabee is a lightweight, framework-agnostic utility to render an image (or plain background) as an interactive grid. It allows developers to define custom actions or elements for each grid cell using a simple JSON-like object.

🚀 Features

• ✅ Render any image as a clickable grid overlay
• ✅ Define custom behavior for each grid cell
• ✅ Number each cell with mark mode
• ✅ Works with or without an image
• ✅ Lightweight and fast — no external dependencies

📦 Installation

To use Pixabee in your project:

npm install pixabee

or with Yarn:

yarn add pixabee

⚙️ Usage

✅ Basic Example

import React from "react";
import Pixabee from "pixabee";

const App = () => {
  return (
    <div style={{ width: "600px", margin: "40px auto" }}>
      <Pixabee
        imageUrl="https://example.com/your-image.jpg"
        gridCount={36}
        columns={6}
        mark={true}
        gridMap={{
          1: () => (
            <img
              src="https://cdn-icons-png.flaticon.com/512/1828/1828817.png"
              alt="plus"
              style={{ width: 24, cursor: "pointer" }}
              onClick={() => alert("Plus clicked!")}
            />
          ),
          10: () => (
            <button
              style={{ padding: "4px 8px" }}
              onClick={() => alert("You clicked grid 10")}
            >
              Click Me
            </button>
          ),
        }}
      />
    </div>
  );
};

export default App;

🔧 Props Reference

| Prop | Type | Required | Default | Description | | ----------- | --------- | -------- | ----------- | ------------------------------------------------------------ | | imageUrl | string | ❌ | null | URL or path to background image (optional) | | gridCount | number | ✅ | 9 | Total number of grid cells | | columns | number | ❌ | auto (√n) | Number of columns; rows are auto-calculated | | gridMap | object | ✅ | {} | Map of grid cell number to render function (see example) | | mark | boolean | ❌ | false | If true, shows grid number labels on top-left of each cell |

🎨 Styling & Layout

• The grid fills the width of the parent container.
• The height is automatically calculated via aspect-ratio based on columns & rows.
• If imageUrl is omitted, a default gray background is shown.
• You can override any styles by wrapping it in your own container div.

💡 Use Cases

• Interactive learning diagrams (e.g. anatomy, circuits)
• Image annotation tools
• Educational games
• Dynamic dashboards
• Puzzle/grid-based UIs

📄 License

MIT © Biswajeet5875