getlost-sdk v0.1.16

Get Lost SDK

This (React) package is built as a internal packages for easy interaction with our API. It's build so it can be used in the browser our in native apps – with React Native.

Installation

To install the SDK make sure you have react ans swr installed. Then simply install the package with npm:

npm install getlost-sdk

Usage with Next.js

Make sure you include the package to the transpilePackages option in the next.config.js file. https://nextjs.org/docs/advanced-features/compiler#module-transpilation

Usage

It's recommended to wrap the application in a GetLostSDKProvider so configuration such as stores and api urls are in one place. Below is an example in a browser context.

function App() {
  return (
    <GetLostSDKProvider
      api={{ baseUrl: process.env.API_URL }}
      store={createBrowserStore(window.localStorage)}
    >
      {/* App goes here */}
    </GetLostSDKProvider>
  );
}

createBrowserStore is a simple function provided by the package. See Store implementation for more info.

Have a look in the examples folder for an functional implementation.

Stores

A store is used to locally store data without the need for signing in. We use it to store a user-reference.

Store implementation

Because we support multiple platforms the store implementation is replaceable. Meaning you can use localStorage in the browser or expo-secure-store in a React Native app.

You can use the createBrowserStore function to easily create a store that's based on localStorage or sessionStorage.

import { createBrowserStore } from 'getlost-sdk';

const browserStore = createBrowserStore(window.localStorage);

Creating a store in React Native

For creating a store inside an Expo (React Native) app you must implement you own store implementation. In the example below we use expo-secure-store:

import type { Store } from 'getlost-sdk';
import { getItemAsync, setItemAsync, deleteItemAsync } from 'expo-secure-store';

// implement our own store implementation based on expo-secure-store
const store: Store = {
  getItem: async (key) => (await getItemAsync(key)) || undefined,
  setItem: async (key, value) => await setItemAsync(key, value),
  removeItem: async (key) => await deleteItemAsync(key),
};

Then you can pass this store to the GetLostSDKProvider:

function App() {
  return (
    <GetLostSDKProvider
      store={store} // our own store based on expo-secure-store
    >
      {/* App goes here */}
    </GetLostSDKProvider>
  );
}