Component Interface

Variable, usage and form API usage.

Management of global variables

In Uncodie, global variables are managed and are availableObtención

Para obtener el valor de una variable global, acceda a la variable state. Evite crear otra variable llamada state en el alcance (scope) donde necesita acceder a estas variables globales, para no sobreescribir el valor existente.

Usage example:

In this example, we will retrieve the value of a global user_name:

console.log(state['user_name']);
console.log(state.user_name);

Modification

To modify the value of a global variable, use the dispatch method available throughout the component. The dispatch method accepts an object as a parameter with the payload property. The payload property is an object containing two properties: key and value. The key property represents the name of the global variable you want to modify, and the value property represents the new value you want to assign

Usage exmaple:

In this example, we are going to modify the value of the global variable. user_name:

dispatch({ payload: { key: "user_name", value: "Zuko" } });

Management of local variables

In Uncodie, local variables are managed and available to all child components of the component where they

Obtención

Para obtener el valor de una variable local, acceda a la variable utilizando el nombre del componente Where it is configured, followed by the suffix LocalState.

Usage example: In this example, we are going to get the value of the local variable age that is configured in the component UserScreen:

console.log(UserScreenLocalState["age"]);
console.log(UserScreenLocalState.age);

Modification

To modify the value of a local variable, use the dispatch{Component Name} method, where {Component Name} is the name of the component in which the variable is configured. This method accepts an object as a parameter with the payload property. The payload property is an object that contains two properties: key and value. The key property represents the name of the local variable you want to modify, and the value property represents the new value you want to assign to it. Example of use: In this example, we are going to modify the value of the age variable configured in the UserScreen component:

dispatchUserScreen({ payload: { key: "age", value: 25 } });

Form handling

In Uncodie, the values of a form are handled as context for all the children of the form.

Get

To get the value of a variable within the form, access the globalStateForm variable available on all elements and child components of a form.

Usage example: In this example, we will obtain the value of the age variable within the parent form of an elementconsole.log(globalStateForm["age"]);

console.log(globalStateForm.age);

Modification

To modify the value of a variable within a form, use the dispatchForm method. This method accepts an object as a parameter with the payload property. The payload property is an object that contains two properties: key and value. The key property represents the name of the local variable you want to modify, and the value property represents the new value you want to assign to it.

Usage example: In this example, we are going to modify the value of the age variable configured in the parent form:

dispatchForm({ payload: { key: "age", value: 25 } });

Component variants

In Uncodie, the variants of a component are handled to be able to visualize the variant of the component these variants are obtained from Figma. The variant variable and setVariant will only be available for components that have variants from Figma. To learn more about component variants in Figma follow this link:https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants

Get

To get the value of the variant within the component, access the variant variable available in all elements of the component as a variant.

Usage example:

In this example, we are going to obtain the value of the variant with which the component is.

console.log(variant)

Modification

To modify the variant of a component we will use the setVariant method. The setVariant method receives a string that represents the variant to be displayed

Usage Example: In this example, we are going to modify the value of the variant of a component:

setVariant("State=Default")