Simple Example

The Flower component defines an application flow with a specific name, used to identify the specific flow. This is the fundamental component for define the flow, and it accepts the mandatory prop 'name', an 'initialData' field, to pre-populate the values.

The FlowerNode component represents a UI state or a step within the application flow. Transitions between nodes can be specified using the to object.

Navigate with routes

Additionally, it's possible to navigate between nodes by defining specific routes.

Navigation State Rules

Flower has an internal state to control flow paths more advancedly, adding rules that determine one path over another. Below is an example of how a rule works.

In this example, we're passing the initialData object to the Flower component through the initialData prop. You can initialize this object with desired data, such as the value of skipStep2 that we set to true. When the Flower is initiated, it will use this initial data to establish the initial state of the flow.

The FlowerNode step1 connects to both step2 and step3. However, the rule states that if skipStep2 is true, it should go directly to step3.

Basic WRITE | READ State

To modify the internal state of Flower, besides passing initialData as a prop, we can always modify and read the state through the components FlowerField and FlowerValue. FlowerField pass two props, onChange and value, to properly modify and read the value from the state of Flower. FlowerValue pass value, to properly read the value from the state of Flower.

Here's an example of how it works: