> For the complete documentation index, see [llms.txt](https://docs.uncodie.com/1.0/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.uncodie.com/1.0/documentation/api/component-interface.md).

# Component Interface

Variable, usage and form API usage.

### Management of global variables

#### In Uncodie, global variables are managed and are available**Obtenció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`:

```javascript
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`:

```javascript
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`:

```javascript
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:

```javascript
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"]);

```javascript
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:

```javascript
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>&#x20;

**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.

```javascript
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:

```javascript
setVariant("State=Default")
```