Integrate any javascript framework¶

Audience: Advanced web developers with complex apps that may not have been covered by the other tutorials

Pre-requisites: Intermediate knowledge of html and javascript

Import LightningState.js¶

To connect any javascript framework, import the LightningState.js library. LightningState.js enables two-way communication between a javascript framework and a Lightning app.

To import this library, add this to your html:

<script src="https://storage.googleapis.com/grid-packages/lightning-ui/v0.0.0/LightningState.js"></script>

Once it’s imported, use it inside your app, this example uses it inside a React App:

    import { useLightningState } from "./hooks/useLightningState";
    import cloneDeep from "lodash/cloneDeep";

    function App() {
        const { lightningState, updateLightningState } = useLightningState();

        const modify_and_send_back_the_state = async (event: ChangeEvent<HTMLInputElement>) => {
            if (lightningState) {
            const newLightningState = cloneDeep(lightningState);
            // Update the state and send it back.
            newLightningState.flows.counter += 1

            updateLightningState(newLightningState);
            }
    };

    return (
        <div className="App">
        </div>
    );
}

export default App;

Update the Lightning app¶

Use updateLightningState to update the lightning app. Here we update a variable called counter.

import { useLightningState } from "./hooks/useLightningState";
import cloneDeep from "lodash/cloneDeep";

function App() {
        const { lightningState, updateLightningState } = useLightningState();

        const modify_and_send_back_the_state = async (event: ChangeEvent<HTMLInputElement>) => {
            if (lightningState) {
            const newLightningState = cloneDeep(lightningState);
            // Update the state and send it back.
            newLightningState.flows.counter += 1

            updateLightningState(newLightningState);
            }
    };

    return (
        <div className="App">
        </div>
    );
}

export default App;

Receive updates from the Lightning app¶

Whenever a variable in the Lightning app changes, the javascript app will receive those values via lightningState.

Extract any variable from the state and update the javascript app:

import { useLightningState } from "./hooks/useLightningState";
import cloneDeep from "lodash/cloneDeep";

function App() {
        const { lightningState, updateLightningState } = useLightningState();

        const modify_and_send_back_the_state = async (event: ChangeEvent<HTMLInputElement>) => {
            if (lightningState) {
            const newLightningState = cloneDeep(lightningState);
            // Update the state and send it back.
            newLightningState.flows.counter += 1

            updateLightningState(newLightningState);
        }
    };

    return (
        <div className="App">
        </div>
    );
}

export default App;

Examples¶

See this in action in these examples:

React.js

Explore how React.js uses lightningState.js

intermediate

Example 2

Show off your work! Contribute an example.

Waiting for contributed example

Example 3

Show off your work! Contribute an example.

Waiting for contributed example