# Scripts

## React Providers

By default, the script is executed with these additional parameters in the function to access the context of the application and modify the app behavior.

### Global Dispatch

Allow to modify the global context of the application

{% code lineNumbers="true" %}

```javascript
dispatch.globalDsipatch({
    payload: {
        key: varName,
        value: varValue
    }
})
```

{% endcode %}

### Dispatch Session Context

Allows you to modify values ​​related to the logged-in user

{% code lineNumbers="true" %}

```javascript
dispatchSessionContext({
    payload: {
        key: 'user',
        value: 'value'
    }
})
```

{% endcode %}

### Dispatch Overlay

Allows you to modify values ​​related to the overlay context

{% code lineNumbers="true" %}

```javascript
dispatchOverlay({
    NameComponent: 'ModalNewProyect'
    destNodeName: 'ModalNewProyect',
    navigation: 'OVERLAY',
    transition: {
        "type": "MOVE_IN",
        "direction": "BOTTOM ",
        "matchLayers": false,
        "easing": {
            "type": "EASE_OUT"
        },
        "duration": 0.30000001192092896
    },
    prototyping: {
        "overlayBackgroundInteraction": "CLOSE_ON_CLICK_OUTSIDE",
        "overlayPositionType": "CENTER",
        "overlayBackground ": {
            "type": "SOLID_COLOR",
            "color": {
                "r": 0,
                "g": 0,
                "b": 0,
                "a": 0.699999988079071
            }
        }
    },
    overlayBackground: 'rgba(0, 0, 0, 0.699999988079071)',
    width: 770,
    height: 344
}, {})
```

{% endcode %}

### Dispatch Form

Works if the script is being executed inside a Form element, otherwise it will be undefined. Allows you to modify form values ​​eg:

{% code lineNumbers="true" %}

```javascript
dispatchForm({
    payload: {
        key: 'name',
        value: 'hello'
    }
})
```

{% endcode %}

### Local Context

You will also have access from this parameter to the localContext of parent elements that are executing the script.

{% code lineNumbers="true" %}

```javascript
[localContext].dispatch({
    payload: {
        key: 'name',
        value: 'hello'
    }
})
```

{% endcode %}

The localContext will have the same name as the name configured in the Figma component with two attributes: state and dispatch.

<table><thead><tr><th width="185">Attribute</th><th width="105.33333333333331">Type</th><th>Usage</th></tr></thead><tbody><tr><td>State</td><td>Object</td><td>State will have the state of the localContext</td></tr><tr><td>dispatch</td><td>Object</td><td>dispatch will allow to modify the state of the localContext in question</td></tr></tbody></table>

## Code Example

Code example using the dispatch object to show an alert in the app window

{% code lineNumbers="true" %}

```javascript
(dispatch) => {
    window.alert(" hello world! ")
}
```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.uncodie.com/1.0/documentation/ide/importing-code/scripts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.