React components

[geclos]

WAT

We want to offer a standalone library of react components that communicate with a Latitude backend, so that you can easily integrate more deeply Latitude into existing codebases.

TODO

• [x] Implement data layer in @latitude-data/react here
• [x] Implement latitude-embed JS component to communicate with an embedded iframe of a latitude app here

[Thawab8]

can this enable us to build our own component? for example using this as date range https://ui.shadcn.com/docs/components/date-picker

[geclos]

Yup, as part of the react library there will be a state manager to handle communication with a latitude backend, so that you can create your own components that communicate with Latitude.

What I'm thinking about (pseudo-code, don't take it too seriously):

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

function MyCustomReactComponent () {
  const { data: queryResult, isLoading } = useQuery('titles') // this requests the query results for the query 'titles' and  manages the frontend state for this query result

  console.log(queryResult) // or do whatever you want with it

  // ...
}

useQuery would accept query parameters as a second argument, and those can come from anywhere (like the date range you mention)

[andresgutgon]

@Thawab8 documentation for getting data from your Latitude project in your react project can be found here https://docs.latitude.so/guides/embed/react-components

Please let us know if something is not clear

[andresgutgon]

This is an old issue we are working on it here https://github.com/latitude-dev/latitude/issues/312