open-index/open-npm huggingface dataset:
npm package: @journeyapps/powersync-react
Description: React components for JourneyApps PowerSync
Author: JOURNEYAPPS
Latest version: 1.1.3
Deprecated: This package has moved to @powersync/react.

# React components for PowerSync

## Context

Configure a PowerSync DB connection and add it to a context provider.

```JSX
// App.jsx
import { PowerSyncDatabase } from '@journeyapps/powersync-react-native';
import { PowerSyncContext } from "@journeyapps/powersync-react";
export const App = () => {
    const powerSync = React.useMemo(() => {
        // Setup PowerSync client
    }, [])

    return <PowerSyncContext.Provider value={powerSync}>
        {/** Insert your components here */ }
    </PowerSyncContext.Provider>
}
```

### Accessing PowerSync

The provided PowerSync client is available with the `usePowerSync` hook.

```JSX
// TodoListDisplay.jsx
import { usePowerSync } from "@journeyapps/powersync-react";

export const TodoListDisplay = () => {
    const powersync = usePowerSync();

    const [lists, setLists] = React.useState([]);

    React.useEffect(() => {
        powersync.getAll('SELECT * from lists').then(setLists)
    }, []);

    return <ul>
        {lists.map(list => <li key={list.id}>{list.name}</li>)}
    </ul>
    }
```

### Watched Queries

Watched queries will automatically update when a dependant table is updated.

```JSX
// TodoListDisplay.jsx
import { usePowerSyncWatchedQuery } from "@journeyapps/powersync-react";

export const TodoListDisplay = () => {
    const todoLists = usePowerSyncWatchedQuery('SELECT * from lists');

    return <View>
      {todoLists.map((l) => (
        <Text key={l.id}>{JSON.stringify(l)}</Text>
      ))}
    </View>
}
```
npm package: @journeyapps/powersync-sdk-common
Description: API definitions for JourneyApps PowerSync
Author: JOURNEYAPPS
Latest version: 1.6.0
Deprecated: This package has moved to @powersync/common.

# PowerSync SDK common JS

This package contains a TypeScript implementation of a PowerSync database connector and streaming sync bucket implementation, which is used in the following SDKs:

- [packages/powersync-sdk-react-native](./packages/powersync-sdk-react-native/README.md)
- [packages/powersync-sdk-web](./packages/powersync-sdk-web/README.md)
npm package: @journeyapps/powersync-sdk-web
Description: A Web SDK for JourneyApps PowerSync
Author: JOURNEYAPPS
Latest version: 0.5.0
Deprecated: This package has moved to @powersync/web.

<p align="center">
  <a href="https://www.powersync.com" target="_blank"><img src="https://github.com/powersync-ja/.github/assets/19345049/602bafa0-41ce-4cee-a432-56848c278722"/></a>
</p>

# PowerSync SDK for Web

[PowerSync](https://powersync.com) is a service and set of SDKs that keeps Postgres databases in sync with on-device SQLite databases.

This package (`packages/powersync-sdk-web`) is the PowerSync SDK for JavaScript Web clients. It is an extension of `packages/powersync-sdk-common`.

See a summary of features [here](https://docs.powersync.com/client-sdk-references/js-web).

## Beta Release

The web SDK package is currently in a Beta release.

# Installation

## Install Package

```bash
npm install @journeyapps/powersync-sdk-web
```

## Install Peer Dependency: WA-SQLite

This SDK currently requires `@journeyapps/wa-sqlite` as a peer dependency.

Install it in your app with:

```bash
npm install @journeyapps/wa-sqlite
```

# Getting Started

Our [full SDK reference](https://docs.powersync.com/client-sdk-references/js-web) contains everything you need to know to get started implementing PowerSync in your project.

# Changelog

A changelog for this SDK is available [here](https://releases.powersync.com/announcements/powersync-js-web-client-sdk).

# API Reference

The full API reference for this SDK can be found [here](https://powersync-ja.github.io/powersync-js/web-sdk).

# Examples

For example projects built with PowerSync on Web, see our [Demo Apps / Example Projects](https://docs.powersync.com/resources/demo-apps-example-projects#js-web) gallery. Most of these projects can also be found in the [`demos/`](../demos/) directory.

# Found a bug or need help?

- Join our [Discord server](https://discord.gg/powersync) where you can browse topics from our community, ask questions, share feedback, or just say hello :)
- Please open a [GitHub issue](https://github.com/powersync-ja/powersync-js/issues) when you come across a bug.
- Have feedback or an idea? [Submit an idea](https://roadmap.powersync.com/tabs/5-roadmap/submit-idea) via our public roadmap or [schedule a chat](https://calendly.com/powersync-product/powersync-chat) with someone from our product team.