# @lia-labs/sdk-solid

> Solid primitives for the Lia SDK. Lia's state as accessors, and buttons that live as long as their owner. From the Lia developer docs: https://docs.lialabs.org/packages/solid

```sh
npm install @lia-labs/sdk @lia-labs/sdk-solid
```

Solid 1.8 or later. Everything from [`@lia-labs/sdk`](/packages/sdk) is re-exported. Each primitive cleans up with its owner (a component or a root).

## An app

```tsx
import { createEffect, createSignal, Show } from 'solid-js';
import { createBackButton, createInit, createMainButton, isLia, mockLia, pay, ready, useLanguage } from '@lia-labs/sdk-solid';

if (!isLia()) mockLia();

function Game(props: { onBack: () => void }) {
  createBackButton(props.onBack); // shown while this component lives
  return <p>Playing…</p>;
}

export function App() {
  const lia = createInit();
  const language = useLanguage();
  const [playing, setPlaying] = createSignal(false);
  createEffect(() => lia().status === 'ready' && ready());
  createMainButton(() => !playing() && { text: 'Buy extra lives', onClick: () => pay('extra-lives') });

  return (
    <Show when={lia().status === 'ready'}>
      <h1>Hello ({language()})</h1>
      <Show when={playing()} fallback={<button onClick={() => setPlaying(true)}>Play</button>}>
        <Game onBack={() => setPlaying(false)} />
      </Show>
    </Show>
  );
}
```

## Primitives

| Export | Gives you |
| --- | --- |
| `createInit(options?)` | An accessor of `{ status, result, error }`. Calls `init()` once. |
| `useSignal(value)` | Any SDK value as an accessor. |
| `usePlayer()`, `useMode()`, `useLanguage()`, `useRtl()`, `useColorScheme()`, `useThemeParams()`, `useViewport()`, `useSafeArea()`, `useContentSafeArea()`, `useIsFullscreen()`, `useStartParam()`, `useSoundOn()`, `useNotificationsAllowed()` | Lia's state as accessors. |
| `createLiaEvent(event, handler)` | Listens to one of Lia's events. |
| `createMainButton(options)`, `createSecondaryButton(options)` | Shows the button. `options` can be an object or an accessor, and the button follows it; `null` or `false` hides it. |
| `createBackButton(onBack)`, `createSettingsButton(onOpen)` | Shows the header button. |
| `createClosingConfirmation()`, `createVerticalSwipesDisabled()` | For the owner's life. |