React Integration

Example component

import { Canvas, painters } from 'headbreaker-ts';
import { useEffect, useRef } from 'react';

function DemoPuzzle({ id }) {
  const puzzleRef = useRef(null)

  useEffect(() => {
    const puzzle = puzzleRef.current
    const canvas = new Canvas(puzzle.id, {
      width: 800, height: 650,
      pieceSize: 100, proximity: 20,
      borderFill: 10, strokeWidth: 2, lineSoftness: 0.18,
      painter: new painters.Konva()
      // ^ this is important — see
      // https://github.com/ShadowNineX/headbreaker/issues/51
    });

    canvas.autogenerate({
      horizontalPiecesCount: 2,
      verticalPiecesCount: 2,
      metadata: [
        { color: '#B83361' },
        { color: '#B87D32' },
        { color: '#A4C234' },
        { color: '#37AB8C' }
      ]
    });

    canvas.draw();
  }, [])

  return <div ref={puzzleRef} id={id}></div>
}

export default function Home() {
  return (
    <main>
      <h1>Headbreaker From React</h1>
      <DemoPuzzle id="puzzle" />
    </main>
  )
}