npm package: @local-logic/elements-js
Description: > ⚠️ This package is in active development and is not production-ready.
Author: Local Logic
Latest version: 1.4.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# 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/<VERSION>/<FORMAT>/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:

```js
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. 

```js
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. |

#### Returns
`Promise<void>`

> ℹ️ For `ElementTypeOptions` for every Element, refer to the documentation for Local Logic Elements React.

## TypeScript Support
Local Logic Elements JS comes packaged with TypeScript declarations.