## File: README.md

<a href="https://electric-sql.com">
  
    
    
    
  
</a>

# ElectricSQL Examples

This repo contains example applications illustrating how to use [ElectricSQL](https://electric-sql.com) with various drivers and frameworks.

See the sub folders for the actual applications. These include:

- [expo](./expo) &mdash; example mobile app using [Expo](https://expo.dev) with the [expo-sqlite](https://docs.expo.dev/versions/latest/sdk/sqlite/) driver
- [react-native](./react-native) &mdash; example mobile app using [React Native](https://reactnative.dev) with the [react-native-sqlite-storage](https://www.npmjs.com/package/react-native-sqlite-storage) driver
- [web](./web) &mdash; a simple web application using ElectricSQL in the browser with [wa-sqlite](https://github.com/rhashimoto/wa-sqlite)

## Running the examples

Each example has usage instructions in the `README.md`.

 See the docs for more information on [how to run the backend locally](https://electric-sql.com/docs/overview/examples#option-3--run-the-backend-locally).

## More information

See the [documentation](https://electric-sql.com/docs) and [community guidelines](https://github.com/electric-sql/meta). If you need help [let us know on Discord](https://discord.gg/B7kHGwDcbj).

---

## File: expo/README.md

<a href="https://electric-sql.com">
  
    
    
    
  
</a>

# ElectricSQL - Expo example

This is an example mobile app using [Expo](https://expo.dev) with the [expo-sqlite](https://docs.expo.dev/versions/latest/sdk/sqlite/) driver.

## Pre-reqs

See the [Expo installation docs](https://docs.expo.dev/get-started/installation/).

## Install

Clone this repo and change directory into this folder:

```sh
git clone https://github.com/electric-sql/examples
cd examples/expo
```

Install the dependencies:

```sh
yarn
```

## Run

Run in the Android simulator:

```sh
yarn android
```

Run in the iOS simulator:

```sh
yarn ios
```

## Sync

The application is setup to sync via a local instance of the Electric sync service. See the docs for more information on [how to run the backend locally](https://electric-sql.com/docs/overview/examples#option-3--run-the-backend-locally).

## Notes on the code

The main code to look at is in [`./src/Example.tsx`](./src/Example.tsx).

```tsx
export const ElectrifiedExample = () => {
  const [db, setDb] = useState<ElectrifiedDatabase>();

  useEffect(() => {
    const init = async () => {
      const original = SQLite.openDatabase('example.db');
      const db = await electrify(original, config)

      setDb(db)
    }

    init();
  }, []);

  if (db === null) {
    return null
  }

  return (
    <ElectricProvider db={db}>
      <Example />
    </ElectricProvider>
  );
};
```

This opens an electrified database client and passes it to the application using the React Context API. Components can then use the [`useElectric`](https://electric-sql.com/docs/usage/frameworks#useelectric-hook) and [`useElectricQuery`](https://electric-sql.com/docs/usage/frameworks#useelectricquery-hook) to access the database client and bind reactive queries to the component state.

```tsx
const ExampleComponent = () => {
  const {results, error} = useElectricQuery('SELECT value FROM items', []);
  const db = useElectric() as ElectrifiedDatabase;

  if (error !== undefined) {
    return (
      <View>
        <Text style={styles.item}>Error: {`${error}`}</Text>
      </View>
    );
  }

  if (results === undefined) {
    return null;
  }

  const addItem = () => {
    db.transaction(tx => {
      tx.executeSql('INSERT INTO items VALUES(?)', [uuidv4()]);
    });
  };

  const clearItems = async () => {
    db.transaction(tx => {
      tx.executeSql('DELETE FROM items where true', undefined);
    });
  };

  return (
    <View>
      {results.map((item, index) => (
        <Text key={index} style={styles.item}>
          Item: {item.value}
        </Text>
      ))}

      
        <Text style={styles.text}>Add</Text>
      
      
        <Text style={styles.text}>Clear</Text>
      
    </View>
  );
};
```

## More information

See the [documentation](https://electric-sql.com/docs) and [community guidelines](https://github.com/electric-sql/meta). If you need help [let us know on Discord](https://discord.gg/B7kHGwDcbj).

---

## File: quickstart/README.md

<a href="https://electric-sql.com">
  
    
    
    
  
</a>

# ElectricSQL - Quickstart

This is an example web application using ElectricSQL in the browser with React and [SQL.js](https://sql.js.org). It's designed to accompany the [Quickstart guide](https://electric-sql.com/docs/usage/quickstart) in the ElectricSQL documentation.

## Usage

Follow the instructions on the default path of the [Quickstart guide](https://electric-sql.com/docs/usage/quickstart) and see the comments in (and alternative versions of) [src/Example.tsx](src/Example.tsx).

## More information

See the [documentation](https://electric-sql.com/docs) and [community guidelines](https://github.com/electric-sql/meta). If you need help [let us know on Discord](https://discord.gg/B7kHGwDcbj).

---

## File: react-native/README.md

<a href="https://electric-sql.com">
  
    
    
    
  
</a>

# ElectricSQL - React Native example

This is an example mobile app using [React Native](https://reactnative.dev) with the [react-native-sqlite-storage](https://www.npmjs.com/package/react-native-sqlite-storage) driver.

## Pre-reqs

See the React Native CLI Quickstart section at [reactnative.dev/docs/environment-setup](https://reactnative.dev/docs/environment-setup).

## Install

Clone this repo and change directory into this folder:

```sh
git clone https://github.com/electric-sql/examples
cd examples/react-native
```

Install the dependencies:

```sh
yarn
```

Install the [pods](https://cocoapods.org):

```sh
cd ios && pod install && cd ..
```

You may want to also check the [install section of the react-native-sqlite-storage driver README](https://github.com/andpor/react-native-sqlite-storage#installation).

## Run

Run in the Android simulator:

```sh
yarn android
```

Run in the iOS simulator:

```sh
yarn ios
```

Or open in Xcode:

```sh
open ios/ElectricSQLExample.xcworkspace
```

## Sync

The application is setup to sync via a local instance of the Electric sync service. See the docs for more information on [how to run the backend locally](https://electric-sql.com/docs/overview/examples#option-3--run-the-backend-locally).

## Notes on the code

The main code to look at is in [`./src/Example.tsx`](./src/Example.tsx).

```tsx
export const ElectrifiedExample = () => {
  const [db, setDb] = useState<ElectrifiedDatabase>();

  useEffect(() => {
    SQLite.openDatabase('example.db')
      .then((db: Database) => electrify(db, promisesEnabled, config))
      .then((db: ElectrifiedDatabase) => setDb(db))
  }, []);

  if (db === undefined) {
    return null
  }

  return (
    <ElectricProvider db={db}>
      <Example />
    </ElectricProvider>
  );
};
```

This pens an electrified database client and passes it to the application using the React Context API. Components can then use the [`useElectric`](https://electric-sql.com/docs/usage/frameworks#useelectric-hook) and [`useElectricQuery`](https://electric-sql.com/docs/usage/frameworks#useelectricquery-hook) to access the database client and bind reactive queries to the component state.

```tsx
const ExampleComponent = () => {
  const {results, error} = useElectricQuery('SELECT value FROM items', []);
  const db = useElectric() as ElectrifiedDatabase;

  if (error !== undefined) {
    return (
      <View>
        <Text style={styles.item}>Error: {`${error}`}</Text>
      </View>
    );
  }

  if (results === undefined) {
    return null;
  }

  const addItem = () => {
    db.transaction(tx => {
      tx.executeSql('INSERT INTO items VALUES(?)', [uuidv4()]);
    });
  };

  const clearItems = async () => {
    db.transaction(tx => {
      tx.executeSql('DELETE FROM items where true', undefined);
    });
  };

  return (
    <View>
      {results.map((item, index) => (
        <Text key={index} style={styles.item}>
          Item: {item.value}
        </Text>
      ))}

      
        <Text style={styles.text}>Add</Text>
      
      
        <Text style={styles.text}>Clear</Text>
      
    </View>
  );
};
```

## More information

See the [documentation](https://electric-sql.com/docs) and [community guidelines](https://github.com/electric-sql/meta). If you need help [let us know on Discord](https://discord.gg/B7kHGwDcbj).

---

## File: todoMVC/README.md

<a href="https://electric-sql.com">
  
    
    
    
  
</a>

# ElectricSQL - TodoMVC

This is an example TodoMVC web application using ElectricSQL in the browser with [SQL.js](https://sql.js.org) and [absurd-sql](https://github.com/jlongster/absurd-sql).

## Install

Clone this repo and change directory into this folder:

```sh
git clone https://github.com/electric-sql/examples
cd examples/todoMVC
```

Install the dependencies:


```sh
yarn
```

## Run

Build and run:


```sh
yarn start

```

## Sync

The application is setup to sync via a local instance of the Electric sync service. See the docs for more information on [how to run the backend locally](https://electric-sql.com/docs/overview/examples#option-3--run-the-backend-locally).

Open [localhost:3001](http://localhost:3001) in two different browsers (so they're backed by different databases) and try it out. You'll see data being replicated between the client applications.

## More information

See the [documentation](https://electric-sql.com/docs) and [community guidelines](https://github.com/electric-sql/meta). If you need help [let us know on Discord](https://discord.gg/B7kHGwDcbj).

---

## File: web/README.md

<a href="https://electric-sql.com">
  
    
    
    
  
</a>

# ElectricSQL - Web example

This is an example web application using ElectricSQL in the browser with [wa-sqlite](https://github.com/rhashimoto/wa-sqlite).

## Install

Clone this repo and change directory into this folder:

```sh
git clone https://github.com/electric-sql/examples
cd examples/web
```

Install the dependencies:

```sh
yarn
```

## Run

Build and run:

```sh
yarn start
```

## Sync

The application is setup to sync via a local instance of the Electric sync service. See the docs for more information on [how to run the backend locally](https://electric-sql.com/docs/overview/examples#option-3--run-the-backend-locally).

Open [localhost:3001](http://localhost:3001) in two different browsers (so they're backed by different databases) and try it out. You'll see data being replicated between the client applications.

## Notes on the code

In this example, Electric uses wa-sqlite in the browser with IndexedDB for persistence.

The main code to look at is in [`./src/Example.tsx`](./src/Example.tsx):

```tsx
export const Example = () => {
  const [ db, setDb ] = useState<ElectricDatabase & { electric: ElectricNamespace }>()

  useEffect(() => {
    const init = async () => {
      const { db, electric } = await start('electric.db', '', config)
      db.electric = electric // because the hook for live queries expects `electric` to be present on the `db`
      setDb(db)
    }

    init()
  }, [])

  if (db === undefined) {
    return null
  }

  return (
    <ElectricProvider db={db}>
      <ExampleComponent />
    </ElectricProvider>
  )
}
```

This opens an electrified database client and passes it to the application using the React Context API. Components can then use the [`useElectric`](https://electric-sql.com/docs/usage/frameworks#useelectric-hook) and [`useElectricQuery`](https://electric-sql.com/docs/usage/frameworks#useelectricquery-hook) to access the database client and bind reactive queries to the component state.
This example explicitly calls `potentiallyChanged` on the notifier because unlike the other drivers, the wa-sqlite driver is not proxied.

```tsx
const ExampleComponent = () => {
  const db = useElectric() as ElectricDatabase & { electric: ElectricNamespace }
  const electric = db.electric
  const { results } = useElectricQuery('SELECT value FROM items', [])

  const addItem = async () => {
    await electric.adapter.run({
        sql: 'INSERT INTO items VALUES(?)',
        args: [crypto.randomUUID()]
      }
    )
    electric.notifier.potentiallyChanged()
  }

  const clearItems = async () => {
    await electric.adapter.run({
      sql : 'DELETE FROM items where true'
    })
    electric.notifier.potentiallyChanged()
  }

  return (
    
      
        
          Add
        
        
          Clear
        
      
      {results && results.map((item: any, index: any) => (
        
          `{ item.value }`
        
      ))}
    
  )
}
```

## More information

See the [documentation](https://electric-sql.com/docs) and [community guidelines](https://github.com/electric-sql/meta). If you need help [let us know on Discord](https://discord.gg/B7kHGwDcbj).