Hooks

[mhyfritz]

Hi Matt,

This morning I came across Kyle Simpson's TNG-Hooks library, and this reminded me of #42 and your idea to provide a Hooks API for canvas-sketch.

I adapted my previous mousemove example to use tng-hooks: https://codesandbox.io/s/github/mhyfritz/canvas-sketch-mouse-tng-hook.

Maybe a first implementation for canvas-sketch could use tng-hooks internally, automatically wrap the render function in TNG() and expose the TNG hooks (useState etc.) via, say, canvas-sketch/hooks?

Just something to consider :smile:

Happy 2019!

[mattdesl]

Gonna leave this one open as I think React-like hooks would be brilliant alongside canvas-sketch. :+1:

I have a basic test which allows for 'registering' custom hooks (for example, dealing with GUI, mouse listener, DOM changes, etc). You can see it here:

https://gist.github.com/mattdesl/e956aaf557f8ab349c690560ca504e05

Eventually this may end up being part of the canvas-sketch API, I'm happy to discuss further as it seems like something that could grow a lot through community effort (i.e. people publishing canvas-sketch-plugin-xxx).

[kernalphage]

I'm liking how that const params = register(GUI... setup for declaring settings works out. Not too much boilerplate, not too much 'spooky action at a distance'.

I'm not sure if you want to make a hard dependency on React as opposed to just being inspired by React, but have you heard of dis.gui? It looks like there's some neat concepts in there, like gradients and event handling.

[ryzbaka]

Is it possible to use canvas-sketch in a react application as of now?