​
Introduction

If you have Views already configured in your Latitude project, you can embed them directly in your React app using the LatitudeEmbed component.

​
Embedding a view

Once the package is installed, you can now import the LatitudeEmbed component and use it anywhere within your React app. To do that, you need to pass the URL of the view you want to embed.

import { LatitudeEmbed } from '@latitude-data/react'

function App() {
  return (
    <div>
      <h1>My React App</h1>
      <LatitudeEmbed url="https://latitude.app/some/view" />
    </div>
  )
}

​
View parameters

Latitude Views use internal global parameters to manage the state of the view. To learn more about parameters, check the Global Parameters section.

Using the LatitudeEmbed component, you can control the parameters of the embedded view directly from your React app.

​
Initial parameters

You can specify the initial parameters of the view by passing them as params to the LatitudeEmbed component.

import { LatitudeEmbed } from '@latitude-data/react'

function App() {
  return (
    <div>
      <h1>My React App</h1>
      <LatitudeEmbed
        url="https://latitude.app/some/view"
        params={{ name: 'Latitude' }}
      />
    </div>
  )
}

However, this will only set the initial parameters. If you want to update the parameters dynamically, you can use the changeEmbedParams method provided by the package.

​
Updating parameters dynamically

You can update the parameters of the embedded view dynamically by calling the changeEmbedParams method and passing the new parameters.

import { LatitudeEmbed, changeEmbedParams } from '@latitude-data/react'
import { useState } from 'react'

function App() {
  const [name, setName] = useState('Latitude')

  function updateNameParam(newName) {
    changeEmbedParams({ name: newName })
    setName(newName)
  }

  return (
    <div>
      <h1>My React App</h1>
      <input
        type="text"
        value={name}
        onChange={(e) => updateNameParam(e.target.value)}
      />
      <LatitudeEmbed
        url="https://latitude.app/some/view"
        params={{ name }}
      />
    </div>
  )
}

​
Listening to parameter changes

Latitude Views can also contain input components that allow users to modify parameters. You can listen to parameter changes in the embedded view and update your React app accordingly by using the onParamsChanged event.

import { LatitudeEmbed } from '@latitude-data/react'
import { useState } from 'react'

function App() {
  const [name, setName] = useState('Latitude')

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <LatitudeEmbed
        url="https://latitude.app/some/view"
        params={{ name }}
        onParamsChanged={(event) => {
          const { params } = event.detail
          setName(params.name)
        }}
      />
    </div>
  )
}

​
Updating query results

You can update the results of queries displayed in the embedded view by calling the runEmbedViewQuery method and passing the name of the query.

import { LatitudeEmbed, runEmbedViewQuery } from '@latitude-data/react'

function App() {
  return (
    <div>
      <h1>My React App</h1>
      <LatitudeEmbed url="https://latitude.app/some/view" />
      <button onClick={() => {
        // This will run all the queries in your embedded latitude view
        // runEmbedViewQuery({ queryPaths: [] })

        // This will run only `users/total` query
        runEmbedViewQuery({ queryPaths: ['users/total'] })
      }}>
        Update total users
      </button>
    </div>
  )
}

​
Dispatching custom events

For an even more interactive experience, you can dispatch custom events from your React app to the embedded view.

To do this, you first need to send the event from your React app using the triggerCustomEvent method.

import { LatitudeEmbed, triggerCustomEvent } from '@latitude-data/react'

function App() {
  return (
    <div>
      <h1>My React App</h1>
      <button onClick={() => {
        // Send a custom event to the embedded views
        triggerCustomEvent({ message: 'Hello from React!' })
      }}>
        Dispatch event
      </button>
      <LatitudeEmbed url="https://latitude.app/some/view" />
    </div>
  )
}

Finally, you can listen to any custom event in the view itself by using the onCustomEvent event available in the @latitude-data/embedding package, which is included in every Latitude app.

Your Latitude view
<script>
  import { onMount } from 'svelte'
  import { iframe } from '@latitude-data/embedding'

  onMount(async () => {
    iframe.onCustomEvent = async (event) => {
      const data = event.data
      if (!data) return

      console.log(data.value)
      // This will log 'Hello from React!'
    }
  })
</script>

​
Example

We have an example application. You can check the source code if you get lost in the process. In Embedding/index.tsx you can see all the options you can pass to the <LatitudeEmbed /> component.

Experiment by modifying the field within YOUR REACT APP and observe the changes in the Latitude app. Next, adjust the same field within the LATITUDE IFRAME and watch how the React app responds. To execute all queries in the example, click the Run button.

And lastly Pick your character and see how Latitude app shows your Star Wars character. May the force be with you!

InstallationuseQuery