Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt

Use this file to discover all available pages before exploring further.

These modifiers connect a component to the framework’s identity and lifecycle machinery. id gives a component a stable identity for diffing, animation, and scroll position tracking. tag associates a component with a selection value inside controls like Picker. onAppear and onDisappear run a callback when the component is inserted into or removed from the view tree — use them to load data, start and stop timers, or trigger animations.

​
id

Sets a stable identity for diffing and animations. 
.id(value: string | number): Component
​
value
string | number
required
A unique identifier for this component. Used by the framework for diffing, animations, and scroll position tracking.
Identifying items in a list 
ForEach(items, (item) =>
    Text(item.name).id(item.id)
)
Triggering view replacement with identity changes Changing the id value tells the framework this is a new component, triggering removal of the old one and insertion of the new one (including any transition animations). 
const body = () => {
    const [selectedTab, setSelectedTab] = useState("home")

    return Text(selectedTab)
        .id(selectedTab)
        .transition("opacity")
}
Scroll position tracking Use .id() together with .scrollPosition() to track or scroll to specific children. 
const body = () => {
    const [scrollId, setScrollId] = useState(null)

    return ScrollView([
        ForEach(items, (item) =>
            Text(item.name).id(item.id)
        )
    ]).scrollPosition({ id: scrollId, setId: setScrollId })
}

​
tag

Sets a tag value for identifying a component in selection contexts. 
.tag(value: any): Component
​
value
any
required
The tag value used to identify this component. Typically a string or number. Must match the type of the Picker’s selection value.
Picker items Each item in a Picker must have a .tag() that corresponds to the selection value. 
const body = () => {
    const [size, setSize] = useState("m")
    return Picker("Size", { value: size, setValue: setSize }, [
        Text("Small").tag("s"),
        Text("Medium").tag("m"),
        Text("Large").tag("l"),
    ])
}
Numeric tags 
const body = () => {
    const [rating, setRating] = useState(3)
    return Picker("Rating", { value: rating, setValue: setRating }, [
        Text("1 Star").tag(1),
        Text("2 Stars").tag(2),
        Text("3 Stars").tag(3),
        Text("4 Stars").tag(4),
        Text("5 Stars").tag(5),
    ]).pickerStyle("wheel")
}
The .tag() value must match the type used in the Picker’s value and setValue props. Tags are primarily used with Picker components to associate each option with a selection value.

​
onAppear

Runs an action when the component first appears on screen. 
.onAppear(action: () => void): Component
​
action
() => void
required
A callback that runs when the component appears on screen for the first time.
Logging when a view appears 
Text("Hello")
    .onAppear(() => {
        console.log("View appeared")
    })
Loading data on appear 
const body = () => {
    const [data, setData] = useState(null)

    return VStack([
        data
            ? Text(data.title)
            : Text("Loading...")
    ]).onAppear(() => {
        fetchData().then(setData)
    })
}
Triggering animations 
const body = () => {
    const [isVisible, setIsVisible] = useState(false)

    return Text("Fade in")
        .opacity(isVisible ? 1 : 0)
        .onAppear(() => setIsVisible(true))
}
The action runs once when the component is first inserted into the view tree, not every time it becomes visible (e.g., after scrolling back into view).

​
onDisappear

Runs an action when the component is removed from the screen. 
.onDisappear(action: () => void): Component
​
action
() => void
required
A callback that runs when the component is removed from the view tree.
Cleanup on removal 
Text("Temporary view")
    .onDisappear(() => {
        console.log("View removed")
    })
Stopping a timer 
const body = () => {
    const [count, setCount] = useState(0)
    const [timerId, setTimerId] = useState(null)

    return Text(String(count))
        .onAppear(() => {
            const id = setInterval(() => {
                setCount((c) => c + 1)
            }, 1000)
            setTimerId(id)
        })
        .onDisappear(() => {
            clearInterval(timerId)
        })
}
The action runs when the component is removed from the view tree, such as when a conditional hides it or when navigating away.

​
See also

  • onChange — runs an action when a value changes
  • Picker — selection control that uses tag values
  • scrollPosition — track or scroll to children identified by id
  • transition — animate insertion and removal triggered by identity changes