Skip to content

macscripter/hooks-test

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

A somewhat complicated use case solved relatively nicely with React Hooks.

One of my companies had an app made with React, but part of that was a canvas. The canvas was very complicated, and was essentially its own app. The main parts of complexity were drag and zoom on the canvas; momentum when panning (aka slippy maps); drag and drop between the canvas and React, canvas and canvas, React and React; and React state influencing the canvas.

Using component composition, I was able to split the canvas into two parts, which did somewhat split up the code. However, I was unable to split further, and each of the components were about 1k lines, as they had to handle so much.

So I tried again with hooks! It's. So. Much. Simpler.

I thought it would be cool to share to share concepts on how to compose use directives to achieve something like this.

Note I didn't put dragging in, but it seems like it'd scale somewhat well if I did.

Initialized with Create React App (run npm start to begin).

Screenshot

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 82.1%
  • HTML 17.9%