diff --git a/README.md b/README.md index afa6b14..cd2223e 100644 --- a/README.md +++ b/README.md @@ -115,6 +115,46 @@ and finally free the arena with a retained_capacity as the ui will more then lik _ = al.reset(.retain_capacity); ``` +## react like componets: + +you can also create react like componets by creating functions blocks that return a Node, please note that this function is inlined, this is required as children from this node will be shared between all compoents that use this node. +```zig +inline fn button() UI.Node { + return UI.ElementWborder( + .{ + .bottom = 2, + .left = 2, + .right = 2, + .top = 2, + }, + .{ + .b = 30, + }, + .{ + .name = "button", + .rect = .{ + .h = 20, + .w = 60, + }, + .on_click = .{ + .func = &updateButton, + .data = &.{}, + }, + .on_hover = .{ + .func = &hoverButton, + .data = &.{}, + }, + .style = .{ + .background_colour = .{ + .g = 255, + }, + .rounded = 25, + }, + }, + ); +} +``` + ## adding shoots to your project fetch the repo