@8aratta/beehive-deck

A honeycomb hexagon grid for React with flippable cards, responsive layout, and runtime-injected styles. Zero CSS imports — just install, pass your data, and render.

Installation

npm install @8aratta/beehive-deck

Quick Start

import { BeehiveDeck } from '@8aratta/beehive-deck';

const items = [
  { id: '1', title: 'React',      description: '5 years', logoUrl: '/logos/react.svg' },
  { id: '2', title: 'TypeScript', description: '4 years', logoUrl: '/logos/ts.svg' },
  { id: '3', title: 'Node.js',   description: '3 years', logoUrl: '/logos/node.svg' },
];

function App() {
  return <BeehiveDeck items={items} />;
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | items | HexagonData[] | required | Array of hexagon data objects | | maxWidth | number | 5 | Max hexagons per row | | hexSize | number | 65 | Hex radius in pixels | | theme | 'light' \| 'dark' | OS preference | Override the colour scheme | | renderFront | (item) => ReactNode | — | Custom front face content | | renderBack | (item) => ReactNode | — | Custom back face content |

Documentation

Full documentation lives in the docs/ folder:

User Guides

• Getting Started — install and have something working in 5 minutes
• Usage — every prop, pattern, and gotcha
• Styling — how to style the hexagons your way
• Examples — copy-paste recipes for the impatient

Technical Reference

• Architecture — package structure, build pipeline, design decisions
• BeehiveDeck — deep dive into layout, responsiveness, theming, and flip mechanics
• Utils — hex layout algorithm and style injection
• Styles — injected CSS defaults, selectors, and override strategy

License

MIT