Interactive Grid Pattern

import { InteractiveGridPattern } from '@hanzo/ui'

Default

A 24x24 board of 40px cells, lighting up under the pointer.

export function Default() {
  return (
    <YStack width="100%" overflow="hidden" borderWidth={1} borderColor="$borderColor">
      <InteractiveGridPattern squares={[24, 24]} width={40} height={40} />
    </YStack>
  )
}

Small cells

A denser board reads as a texture rather than a puzzle.

export function SmallCells() {
  return (
    <YStack width="100%" overflow="hidden" borderWidth={1} borderColor="$borderColor">
      <InteractiveGridPattern squares={[40, 20]} width={16} height={16} idleColor="transparent" hoverColor="currentColor" />
    </YStack>
  )
}

Tinted

Idle cells carry a faint fill, so the whole board reads before any hover.

export function Tinted() {
  return (
    <YStack width="100%" overflow="hidden" borderWidth={1} borderColor="$borderColor">
      <InteractiveGridPattern
        squares={[16, 10]}
        width={32}
        height={32}
        idleColor="rgba(128, 128, 128, 0.08)"
        hoverColor="rgba(128, 128, 128, 0.4)"
        strokeColor="currentColor"
      />
    </YStack>
  )
}

Types

export type InteractiveGridPatternProps = React.SVGProps<SVGSVGElement> & {
  /** Width of one cell, in px. */
  width?: number
  /** Height of one cell, in px. */
  height?: number
  /** `[horizontal, vertical]` cell counts. */
  squares?: [number, number]
  /** Cell fill while hovered. */
  hoverColor?: string
  /** Cell fill while idle. */
  idleColor?: string
  /** Cell border color. */
  strokeColor?: string
  /** Extra props merged onto every `<rect>`. */
  squareProps?: React.SVGProps<SVGRectElement>
}

Exports

InteractiveGridPatterntype InteractiveGridPatternProps