search

vobyjs / voby

A high-performance framework with fine-grained observable/signal-based reactivity for building rich applications.
https://voby.dev
MIT License
889 stars 22 forks source link

Usage scenarios for Directive #20

Closed FlatMapIO closed 1 year ago

FlatMapIO commented 1 year ago

Recently I've been doing some visualization work and I've been passing const useChart => (opts) => el => {} to <div ref={} />, Directive can do something similar but it looks more complicated, I'd like to know in what scenarios Directive should be used?

fabiospampinato commented 1 year ago

I see a directive as like a special kind of hook that receives a ref not from the user but from the framework directly.

And in some way I see them as an extension mechanism for the JSX, like class or style in some sense are built-in directives, you can define your own directives, but they need to be prefixed with use: when used in the JSX.

I use directives a lot, possibly too much, one of my favorite directive is a "use:shortcuts" directive that kinda attaches shortcuts to an element, shortcuts that are active while the focus is within the element.

I think there's no scenario where you must use a directive, it's kinda up to you, if you like it you can use them, otherwise it's fine as well.

I think their main feature is convenience really. Like if there was no "class" prop I'd definitely define a custom directive for it, because juggling refs and hooks would be way less convenient. If the improvement on convenience isn't big enough with a directive I just go with a hook myself.