Implementation for React

[ajaxecho3]

What to use the library how can I implement that?
Is there any existing wrapper for react?

[sohaibaumer]

Existing wrappers for React well it has a vast ecosystem of third-party libraries and components that you can use in your projects. You can search on www.npmjs.com using keywords related to the library or explore popular React component libraries like Material-UI, Ant Design , or React Bootstrap that provide pre-built React components and wrappers for common UI elements.

[ajaxecho3]

Maybe i used the wrong terms or words to describe my question

But I mean what can the headbreaker (this library ) in React or NextJs

So far my way to use like this

[flbulgarelli]

Hi @ajaxecho3 !

The short answer is that this library does not come with explicit support for React. However, making it work in it should not be that complex, since most of the code is vainilla JS. The only place were troubles may arise is the KonvaJS canvas - which is the current default implementation of the rendering system - since it relies on the HTML canvas, which as far as I understand is not available from React's virtual DOM.

That said, there are some places were you could start:

• Apply the same techniques required to manually draw a canvas from react using useRef hooks, e.g. https://medium.com/@pdx.lucasm/canvas-with-react-js-32e133c05258
• KonvaJS has an extension for React you could try
• Implement your own Painter object on top of React.

Hope that helps!

[ajaxecho3]

Thank you 🙇

[flbulgarelli]

PS: This is a short example of how you could make it work using refs:

import { Canvas, painters } from 'headbreaker';
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/flbulgarelli/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 className="">
      <h1>Headbreaker From React</h1>
      <DemoPuzzle id="puzzle" />
    </main>
  )
}