@local-logic/elements-js NPM

Local Logic Elements JS (Alpha)

⚠️ This package is in active development and is not production-ready.

Local Logic Elements JS is a lightweight wrapper module which provides vanilla JS bindings for Local Logic Elements React. It can be used to Local Logic's UI components library.

Getting started

Installation

First, install with yarn, pnpm, or npm:

yarn add @local-logic/elements-js

pnpm add @local-logic/elements-js

npm i --save @local-logic/elements-js

The script is also available in UMD and EMS format from the Local Logic CDN: https://sdk.locallogic.co/elements-js///index.min.js

Note: Using the CDN approach in production is discouraged. The CDN requires the client download the entire elements library, regardless of which elements are used.

Usage

You can now import the initializer LocalLogicJS and create an instance:

import { LocalLogicJS } from "@local-logic/elements-js";

const ll = LocalLogicJS("<YOUR_TOKEN>");

ℹ️ <YOUR_TOKEN> should be provided to you by a Local Logic team member.

Next, import an Element and pass it to the first argument of the LocalLogicJS instance create method. Pass an options object as the second argument.

import { Scores } from "@local-logic/elements-js";

const node = document.createElement("div");
document.body.appendChild(node);

const scoresList = ll.create(Scores, node, {
  lat: 45.53297,
  lng: -73.585602,
});

API

`LocalLogicJS`

Options

Name	Required	Type	Default	Description
`apiKey`	`true`	`string`		Auth apiKey required for making requests to the Local Logic API.
`options.appearance`	`false`	`AppearanceAPI`		The `appearance` option provides theme and variable support customizing the look and feel of Local Logic Elements.
`options.locale`	`false`	`"en" \\| "fr"`	`"en"`	The `locale` option specifies the language of the scores and the UI interface.

Returns

Name	Type	Description
`create`	`(component: ElementType, node: HTMLElement, options: ElementTypeOptions) => Element`	Creates an Element instance.

Returns

Promise<void>

`Element.update`

Options

Name	Required	Type	Default	Description
`options`	`true`	`ElementTypeOptions`		Update the `ElementTypeOptions` of the `Element`.

Returns

Promise<void>

`Element.on`

Options

Name	Required	Type	Default	Description
`eventType`	`true`	`string`		Update the `ElementTypeOptions` of the `Element`.
`callback`	`true`	`(data) => void`		Trigger a callback when the `eventType` occurs.