Usage Examples

export const db = new PowerSyncDatabase({
  schema: AppSchema,
  database: {
    dbFilename: 'my_app_db.sqlite'
  },
  flags: {
    /**
     * Multiple tab support is enabled by default if available.
     * This can be disabled by setting this flag to false.
     */
    enableMultiTabs: false
  }
});

// ListsWidget.jsx
import React, { useState } from 'react';

export const ListsWidget = () => {
  const [lists, setLists] = useState([]);

  return (
    <div>
      <ul>
        {lists.map((list) => (
          <li key={list.id}>
            {list.name}
            <button
              onClick={async () => {
                try {
                    await PowerSync.writeTransaction(async (tx) => {
                        // Delete the main list
                        await tx.execute(`DELETE FROM lists WHERE id = ?`, [item.id]);
                        // Delete any children of the list
                        await tx.execute(`DELETE FROM todos WHERE list_id = ?`, [item.id]);

                        // Transactions are automatically committed at the end of execution
                        // Transactions are automatically rolled back if an exception occurred
                      })
                    // Watched queries should automatically reload after mutation
                  } catch (ex) {
                    Alert.alert('Error', ex.message)
                  }
              }}
            >
              Delete
            </button>
          </li>
        ))}
      </ul>
      <button
        onClick={async () => {
          try {
              await PowerSync.execute('INSERT INTO lists (id, created_at, name, owner_id) VALUES (uuid(), datetime(), ?, ?) RETURNING *', [
                'A list name',
                "[The user's uuid]"
              ])
              // Watched queries should automatically reload after mutation
            } catch (ex) {
              Alert.alert('Error', ex.message)
            }
        }}
      >
        Create List
      </button>
    </div>
  );
};

const handleButtonClick = async () => {
  await db.execute(
    'INSERT INTO customers(id, name, email) VALUES(uuid(), ?, ?)',
    ['Fred', 'fred@example.org']
  );
};

return (
  <button onClick={handleButtonClick} title="+">
    <span>+</span>
    <i className="material-icons">add</i>
  </button>
);

// Implement the uploadData method in your backend connector
async function uploadData(database) {
  const batch = await database.getCrudBatch();
  if (batch === null) return;

  for (const op of batch.crud) {
    switch (op.op) {
      case 'put':
        // Send the data to your backend service
        // replace `_myApi` with your own API client or service
        await _myApi.put(op.table, op.opData);
        break;
      default:
        // TODO: implement the other operations (patch, delete)
        break;
    }
  }

  await batch.complete();
}

// Example of using connected status to show online or offline

// Tap into connected
const [connected, setConnected] = React.useState(powersync.connected);

React.useEffect(() => {
// Register listener for changes made to the powersync status
  return powersync.registerListener({
    statusChanged: (status) => {
      setConnected(status.connected);
    }
  });
}, [powersync]);

// Icon to show connected or not connected to powersync
// as well as the last synced time
<Icon
  name={connected ? 'wifi' : 'wifi-off'}
  type="material-community"
  color="black"
  size={20}
  style={{ padding: 5 }}
  onPress={() => {
    Alert.alert(
      'Status',
      `${connected ? 'Connected' : 'Disconnected'}. \nLast Synced at ${powersync.currentStatus?.lastSyncedAt.toISOString() ?? '-'
      }\nVersion: ${powersync.sdkVersion}`
    );
  }}
/>;

// Example of using hasSynced to show whether the first sync has completed

// Tap into hasSynced
const [hasSynced, setHasSynced] = React.useState(powerSync.currentStatus?.hasSynced || false);

  React.useEffect(() => {
    // Register listener for changes made to the powersync status
    return powerSync.registerListener({
      statusChanged: (status) => {
        setHasSynced(!!status.hasSynced);
      }
    });
  }, [powerSync]);

return <div>{hasSynced ? 'Initial sync completed!' : 'Busy with initial sync...'}</div>;

import { Box, LinearProgress, Stack, Typography } from '@mui/material';
import { useStatus } from '@powersync/react';
import { FC, ReactNode } from 'react';

export const SyncProgressBar: FC<{ priority?: number }> = ({ priority }) => {
  const status = useStatus();
  const progressUntilNextSync = status.downloadProgress;
  const progress = priority == null ? progressUntilNextSync : progressUntilNextSync?.untilPriority(priority);

  if (progress == null) {
    return <></>;
  }

  return (
    <Stack direction="column" spacing={1} sx={{ p: 4 }} alignItems="stretch">
      <LinearProgress variant="determinate" value={progress.downloadedFraction * 100} />
      <Box sx={{ alignSelf: 'center' }}>
        {progress.downloadedOperations == progress.totalOperations ? (
          <Typography>Applying server-side changes</Typography>
        ) : (
          <Typography>
            Downloaded {progress.downloadedOperations} out of {progress.totalOperations}.
          </Typography>
        )}
      </Box>
    </Stack>
  );
};

import { PowerSyncDatabase, resolveWebPowerSyncFlags, WebPowerSyncFlags } from '@powersync/web';
import { AppSchema } from '@/library/powersync/AppSchema';

// Define custom flags
const customFlags: WebPowerSyncFlags = resolveWebPowerSyncFlags({
  enableMultiTabs: true,
  broadcastLogs: true,
  disableSSRWarning: false,
  ssrMode: false,
  useWebWorker: true,
});

// Create the PowerSync database instance
export const db = new PowerSyncDatabase({
  schema: AppSchema,
  database: {
    dbFilename: 'example.db',
  },
  flags: customFlags,
});

export const db = new PowerSyncDatabase({
  schema: AppSchema,
  database: {
    dbFilename: 'my_app_db.sqlite',
  },
  flags: {
    enableMultiTabs: false,
  },
});

export const db = new PowerSyncDatabase({
  schema: AppSchema,
  database: {
    dbFilename: 'my_app_db.sqlite',
  },
  flags: {
    ssrMode: true,
    disableSSRWarning: true,
  },
});

export const db = new PowerSyncDatabase({
  schema: AppSchema,
  database: {
    dbFilename: 'my_app_db.sqlite',
  },
  flags: {
    broadcastLogs: true,
  },
});