React Board Map

A React BoardMap component with zoom, pan, and touch support.

Usage

import {
  BoardMap,
  setting,
  SettingProps,
} from "@minhnguyen4396/react-board-map"

function BoardMap({ children }: { children: React.ReactNode }) {
  const settingRef = useRef<SettingProps>({
    ...setting,
    zoomMin: 0.5,
    zoomMax: 1.4,
    zoomLevel: [0.5, 0.8, 1.1, 1.4],
  })

  return (
    <BoardMap.Root
      settingRef={settingRef}
      bgImageUrl="https://background.jpg"
      className=""
    >
      <BoardMap.Board className="">
        <BoardMap.Grid>
          {children}
        </BoardMap.Grid>
      </BoardMap.Board>
    </BoardMap.Root>
  )
}

API

Components

• BoardMap.Root - Main container component
• BoardMap.Board - Interactive board area
• BoardMap.Grid - Show items displayed on the board area
• BoardMapProvider - React context provider

Hooks

• useBoardMap - Custom hook for BoardMap functionality

Types

• SettingProps - Setting configuration interface

Default setting

{
  "x": 0,
  "y": 0,
  "actualX": 0,
  "actualY": 0,
  "zoom": 0.55,
  "width": -1,
  "height": -1,
  "centerX": -1,
  "centerY": -1,
  "center": { "x": 0, "y": 0 },
  "deltaX": 0,
  "deltaY": 0,
  "boardWidth": -1,
  "boardHeight": -1,
  "zoomMin": 0.5,
  "zoomMax": 1.1,
  "mobileDefaultZoom": 0.5,
  "desktopDefaultZoom": 0.55,
  "limitX": [0, 0],
  "limitY": [0, 0],
  "desktopOffsetHeight": 0,
  "mobileOffsetHeight": 0,
  "zoomLevel": [0.55, 0.8, 1.1],
  "zoomLevel_mobile": [0.5, 0.5, 0.5]
}

License

MIT