lofik react

To see lofik being used in a demo app, have a look at the examples

Basic usage

[!IMPORTANT] To make persistent storage (OPFS) work, these two headers are required

• Cross-Origin-Opener-Policy: same-origin
• Cross-Origin-Embedder-Policy: require-corp

Use LofikProvider at the top of your app:

    <LofikProvider
      create={[
        // updatedAt column is required to determine if database operation should be applied
        `
        CREATE TABLE IF NOT EXISTS todos (
          id VARCHAR(40) PRIMARY KEY,
          title TEXT NOT NULL,
          pubKeyHex TEXT NOT NULL,
          deletedAt INTEGER,
          updatedAt INTEGER NOT NULL,
          createdAt INTEGER NOT NULL
        );
      `,
      ]}
      seed={[]} // array of sql queries
      loader={<div>loading..</div>}
      migrate={async (db) => {}}
      websocketServerUrl="ws://localhost:8080"
    >
     {children}
    </LofikProvider>

Then make use of the following hooks. The library is written in typescript, autocomplete will help you a lot.

• useLofikAccount
• useLofikAccountActions
• useLofikDatabase
• useLofikMutation
• useLofikQuery
• useLofikQueryClient