mirror of
https://github.com/centau/vide.git
synced 2026-08-20 23:01:37 +00:00
f8e84f9f8d
* update css and snippets * Add banner * improve home page * Update Banner * cleanup * Update font to JetBrains Mono * Add a quick look to Home * Simplify Home Page * Removed banner, removed copyright notice, reduced home page
56 lines
1.2 KiB
Markdown
56 lines
1.2 KiB
Markdown
# Actions
|
|
|
|
Actions in Vide are special callbacks that you can pass along with properties,
|
|
to run some code on an instance receiving them.
|
|
|
|
```luau
|
|
local action = vide.action
|
|
```
|
|
|
|
```luau
|
|
create "TextLabel" {
|
|
Text = "test",
|
|
|
|
action(function(instance)
|
|
print(instance.Text)
|
|
end)
|
|
}
|
|
|
|
-- will print "test"
|
|
```
|
|
|
|
Actions can be wrapped with functions for reuse. Below is an example of an
|
|
action used to listen for property changes:
|
|
|
|
```luau
|
|
local action = vide.action
|
|
local effect = vide.effect
|
|
local cleanup = vide.cleanup
|
|
|
|
local function changed(prop: string, callback: (new) -> ())
|
|
return action(function(instance)
|
|
local connection = instance:GetPropertyChangedSignal(prop):Connect(function()
|
|
callback(instance[property])
|
|
end)
|
|
|
|
-- remember to clean up the connection when the reactive scope the action
|
|
-- is ran in is destroyed, so the instance can be garbage collected
|
|
cleanup(connection)
|
|
end)
|
|
end
|
|
|
|
local output = source ""
|
|
|
|
local instance = create "TextBox" {
|
|
changed("Text", output)
|
|
}
|
|
|
|
effect(function()
|
|
print(output())
|
|
end)
|
|
|
|
instance.Text = "foo" -- "foo" will be printed from the effect
|
|
```
|
|
|
|
The source `output` will be updated with the new property value any time it is
|
|
changed externally.
|