Skip to main content

Installation

Our SDK products are served from a single source.

The SDKs are designed to work with React and other declarative frameworks.

First, install the entry script with npm, yarn, or pnpm:

npm i --save @local-logic/sdks-js
yarn add @local-logic/sdks-js
pnpm add @local-logic/sdks-js

Example

import { useRef, useEffect } from "react";
import LLSDKsJS from "@local-logic/sdks-js";

const globalOptions = {
  locale: "en", // If available, change to either english or french
  appearance: {
    theme: "day",
    // Add any other appearance changes here
    variables: {
      "--ll-color-primary": "#fd3958",
      "--ll-color-primary-variant1": "#d5405b",
      "--ll-border-radius-small": "8px",
      "--ll-border-radius-medium": "16px",
      "--ll-font-family": "Avenir, sans-serif"
    }
  }
};

const localLogicClient = LLSDKsJS("your-api-key-here", globalOptions);

function MySDKComponent() {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) {
      return;
    }

    const sdkOptions = {
      // Set the lat and lng of the location
      lat: 45.5282164,
      lng: -73.5978527,

      // ...Other sdk specific options
    }

    const sdkInstance = localLogicClient.create(
      "<SDK-NAME>",
      containerRef.current,
      sdkOptions,
    );

    // It is important to destroy the SDK instance when the component is unmounted.
    return () => {
      sdkInstance.destroy();
    }
  }, []);

  return (
    <div
      ref={containerRef}
      style={{
        // Height is dependent on the SDK you are implementing
        height: "100% || 100vh",
        width: "100%",
      }}
    />
  );
}

export default MySDKComponent;