Scripts

Use Scripts to manage common logic and and simple data handling for your app

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

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

Dispatch Session Context

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

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

Dispatch Overlay

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

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
}, {})

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:

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

Local Context

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

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

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

Attribute	Type	Usage
State	Object	State will have the state of the localContext
dispatch	Object	dispatch will allow to modify the state of the localContext in question

Code Example

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

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