# Reactive System | Basalt
A UI Framework made for CC:Tweaked

Skip to content

# Reactive System ​

The reactive system in Basalt allows you to create dynamic property values using expressions. These expressions automatically update when related values change.

## Basic Usage ​

lua

    local basalt = require("basalt")

    -- Create a simple label and center it horizontally
    local main = basalt.getMainFrame()
        :addLabel()
        :setText("Hello World")
        :setX("{parent.width / 2 - self.width / 2}")  -- Centers the label horizontally

    -- Create a progress bar that takes 80% of parent width
    main:addProgressbar()
        :setWidth("{parent.width * 0.8}")
        :setX("{parent.width * 0.1}")  -- 10% margin on both sides

## Available Variables ​

In reactive expressions, you have access to:

- `self` - The current element
- `parent` - The parent element
- `elementName` - A given name of a element
- Any property of these elements (width, height, value, text, etc.)

## Common Use Cases ​

### Responsive Layout ​

lua

    local frame = basalt.getMainFrame()
        :addFrame()
        :setSize("{parent.width * 0.5}", "{parent.height * 0.5}")  -- Takes half of parent size
        :setPosition("{parent.width / 2 - self.width / 2}",        -- Centers the frame
                     "{parent.height / 2 - self.height / 2}")

### Dynamic Sizing ​

lua

    local label = frame:addLabel()
        :setText("Dynamic width based on text")
        :setWidth("{#self.text}")  -- Width equals text length

### Linked Properties ​

lua

    local slider = frame:addSlider("mySlider")
        :setPosition(2, 2)
        :setSize(10, 1)

    local progress = frame:addProgressBar()
        :setPosition(2, 4)
        :setSize(10, 1)
        :setProgress("{mySlider.value}")  -- Progress syncs with slider value

## Syntax ​

- Use curly braces `{}` to define a reactive expression
- Basic math operators are supported (+, -, *, /, %)
- Access properties using dot notation (element.property)
- Can use basic functions and comparisons

## Best Practices ​

1. Keep expressions simple and readable
2. Use meaningful variable names in complex calculations
3. Test expressions with different parent sizes
4. Consider edge cases (minimum/maximum sizes)