1

Install Latitude for React

Install the @latitude-data/react package in your project:

npm install @latitude-data/react
2

Import the styles

Import the styles used by Latitude components in your project’s root file:

index.tsx
import "@latitude-data/react/styles.css";
3

Wrap your app with the LatitudeProvider

Wrap your main component with the LatitudeProvider to enable the use of Latitude components. In the LatitudeProvider, you must set the apiConfig to configure the API connection with the Latitude server.

index.tsx
import { LatitudeProvider } from '@latitude-data/react';

function App() {
  return (
    <LatitudeProvider
      apiConfig={{
        host: <YOUR_API_HOST>
      }}
    >
      {/* Your app content */}
    </LatitudeProvider>
  );
}

​
Using Latitude without components

If you are planning to use the package only for the API features without the built-in components, you can skip the import of the styles.css, and add a theme={false} prop to the LatitudeProvider. This way they won’t be included in your bundle.

index.tsx
import { LatitudeProvider } from '@latitude-data/react';

function App() {
  return (
    <LatitudeProvider
      apiConfig={{
        host: <YOUR_API_HOST>
      }}
      theme={false}
    >
      {/* Your app content */}
    </LatitudeProvider>
  );
}