MD Taseen Khan

Posted on Aug 18, 2023 • Originally published at reactjsexample.com on Aug 18, 2023

A nicely labelled canvas grid that adapts to a transform automatically

#grid #canvas

react-supergrid

Easily create a grid with infinitely nesting subgrid cells.

import React from "react"
import { SuperGrid } from "react-supergrid"
import { useMouseMatrixTransform } from "use-mouse-matrix-transform"

export const MyApp = () => {
  const { transform, ref } = useMouseMatrixTransform()

  return (
    <div ref={ref}>
      <SuperGrid width={1000} height={1000} transform={transform} />
    </div>
  )
}