'after render' event

[bates64]

I would really appreciate having an after render event fired (or something to that effect!) once the app is re-rendered after render is emitted. I frequently find myself wanting to bind events, scroll the new elements into view, or focus elements after nanomorph does it's thing.

The only solution I've found so far is to just setTimeout for 25ms, which feels wayy too hacky for production.

Is it possible to use choo-hooks to do this?

[bcomnes]

You can use https://github.com/choojs/nanocomponent#nanocomponentprototypeafterupdateel

To trigger events after a component updates. That being said, a top level after render event would be handy to trigger global handlers.

[bates64]

Thank you! How do I access the Nanocomponent instance?

[bcomnes]

Not sure I understand the question.

Here is an example of a view using components: https://github.com/hypermodules/hyperamp/blob/master/renderer/player/pages/main.js

And the corresponding component: https://github.com/hypermodules/hyperamp/blob/master/renderer/player/elements/playlist/index.js

Your afterupdate method implementation will have access to this of the component and the raw el will be passed as an argument which you can use to set scroll position among other things.

[bates64]

I'm not using nanocomponent in my app :(
Is there any other way (read: not setTimeout) I can detect once a render is complete?

[marcbachmann]

You'll need to install the nanocomponent module by yourself, instantiate it manually and use it in a view.

We should create a follow-up issue to document that in choo or nanocomponent. Nanocomponent could use a load example. Currently it's only mentioned in the api but not in an example: https://github.com/choojs/nanocomponent#nanocomponentprototypeloadel

A general question is whether we should we add examples for third party libraries to the new choo reference documentation. IMO we should at least mention nanocomponent in some documentation about more advanced use-cases.