Installation
Our SDK products are served from a single source.
- React
- React Native
- Vanilla JavaScript
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 location to use
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;
The Local Logic React Native SDK component allows you to easily add one of our SDKs to your native Android and iOS apps using React Native.
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
Install React Native Webview dependency
React Native Webview is used to port Local Logic SDKs to React Native.
Expo CLI
Install supported react-native-webview
version for Expo applications using Expo CLI.
npx expo install react-native-webview
React Native CLI
Install react-native-webview
using your project's package manager:
npm i --save react-native-webview
yarn add react-native-webview
pnpm add react-native-webview
If using CocoaPods, in the ios/
or macos/
directory run:
pod install
Usage
The React Native component accepts the same options as our web SDKs via it's options
, appearanceOptions
, and renderOptions
props.
import LLSDKs from "@local-logic/sdks-react-native";
const globalOptions = {
locale: "en", // 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 sdkOptions = {
// Set the location to use
lat: 45.5282164, lng: -73.5978527
// ...Other sdk specific options
};
<LLSDKs
apiKey="your-api-key-here"
sdkType="<SDK-NAME>"
options={sdkOptions}
appearanceOptions={globalOptions}
renderOptions={{ lazy: false }}
/>
The script is available in umd
and es
format from the Local Logic CDN: https://sdk.locallogic.co/sdks-js/<VERSION>/index.<FORMAT>.js
<VERSION>
is the latest script version number (which you can find on npm), and <FORMAT>
is either umd
or es
.
Example
<!DOCTYPE html>
<html>
<head>
<title>SDK Javascript Example</title>
<meta charset="UTF-8" />
</head>
<body>
<script
async
src="https://sdk.locallogic.co/sdks-js/<version>/index.umd.js"
onload="loadSDKComponent()"
></script>
<style>
#<SDK-NAME>-widget {
height: 500px;
width: 100%;
}
</style>
<div id="<SDK-NAME>-widget"></div>
<script>
const globalOptions = {
locale: "en", // 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"
}
}
};
function loadSDKComponent() {
(async () => {
// Your API key or token
const ll = LLSDKsJS("your-api-key-here", globalOptions);
const container = document.createElement("div");
// NOTE: If you are implementing multiple SDKs, make
// sure you create unique IDs for each
container.setAttribute("id", "<SDK-NAME>-widget");
// Set the styles of the container
container.style.cssText = `
// Height is dependent on the SDK you are implementing
height: 100% || 100vh;
width: 100%;
display: flex;
`;
// This is the div that will contain the widget
document.querySelector("#<SDK-NAME>-widget").appendChild(container);
const sdkOptions = {
// Set the location to use
lat: 45.5282164, lng: -73.5978527
// ...Other sdk specific options
}
const sdkInstance = ll.create("<SDK-NAME>", container, sdkOptions);
})();
}
</script>
</body>
</html>