Defining States

Every Haiku you create can have its own collection of internal state. These pieces of data are special to your component in that you may "summon" them into your expression functions, allowing you to create complex dynamic behavior.


You can manage your Haiku's state values using the State Inspector, which is accessible via a tab next to the Library:

Press the "+" button at top-right to add a new state value. In the left field, type the state name. In the right field, type the state value. Haiku will automatically infer whether your input value is a string, numeric, or a complex data type like a JSON array or object.

Press Enter to save the state value.


To access a state value in an expression, simply type its name. Haiku will automatically detect the state you are referencing, and will send its current value to your expression whenever it is evaluated.


You're probably thinking to yourself, "States aren't very useful unless you can change them." You're right!

Every Haiku component provides a way to change its states, available when the component is embedded in production.

All you need to do to update states dynamically as your component animates is to pass in a new states object, and the new values it contains will be used in place of the ones you defined inside the Haiku app.

Using React:

    foo: { value: 2 },        // Overrides the default value 1
    bar: { value: "howdy" },  // Overrides the default value "hello"
    baz: { value: 0.98 }      // Overrides the default value 0.98
  }} />

Note: For more about how to interact with your component programmatically, see the Haiku Core API section.

Next: All About "Summonables"

results matching ""

    No results matching ""