# react-pocketbase-hooks

> Unofficial React SDK (React, React Native, Expo) for interacting with the PocketBase JS SDK

Latest version **0.1.6** (published 2023-01-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-pocketbase-hooks
pnpm add react-pocketbase-hooks
yarn add react-pocketbase-hooks
bun add react-pocketbase-hooks
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2023-01-17 |
| First published | 2023-01-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 387.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Tobias Krainhöfner |
| Maintainers | edcelmanuel |
| Keywords | pocketbase, react, react-native, expo, sdk, javascript, typescript, javascript-sdk |

## Links

- npm: https://www.npmjs.com/package/react-pocketbase-hooks
- Repository: https://monggihubx.com
- Issues: https://monggihubx.com
- npm.io page: https://npm.io/package/react-pocketbase-hooks

## Dependencies (8)

- [redux](https://npm.io/package/redux.md) ^4.2.0
- [pocketbase](https://npm.io/package/pocketbase.md) ^0.10.0
- [react-redux](https://npm.io/package/react-redux.md) ^8.0.4
- [react-native](https://npm.io/package/react-native.md) ^0.70.6
- [redux-persist](https://npm.io/package/redux-persist.md) ^6.0.0
- [@reduxjs/toolkit](https://npm.io/package/@reduxjs/toolkit.md) ^1.8.5
- [@types/react-native](https://npm.io/package/@types/react-native.md) ~0.70.6
- [@react-native-async-storage/async-storage](https://npm.io/package/@react-native-async-storage/async-storage.md) ^1.17.10

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.6 (latest) — 2023-01-17
- 0.1.5 — 2023-01-17
- 0.1.2 — 2023-01-17
- 0.1.1 — 2023-01-17
- 0.1.0 — 2023-01-14

## README

# PocketBase React SDK

[![Npm package version](https://badgen.net/npm/v/react-pocketbase-hooks)](https://npmjs.com/package/react-pocketbase-hooks)

Unofficial React SDK (React, React Native, Expo) for interacting with the [PocketBase JS SDK](https://github.com/pocketbase/js-sdk).

- [Installation](#installation)
<!-- - [Usage](#usage)
- [Caveats](#caveats)
- [Development](#development) -->

## Installation

### React, React Native or Expo

```sh
# Using npm
npm install react-pocketbase-hooks  --save

#Using yarn
yarn add react-pocketbase-hooks
```

```tsx
import { Pocketbase } from 'react-pocketbase-hooks';
```

---

> 🔧 React Native / Expo doesn't have native `EventSource` implementation, so in order to use the realtime service you'll need to load a `EventSource` polyfill.
> I recommend [EventSource/eventsource](https://github.com/EventSource/eventsource)
>
> ```sh
> # Using npm
> npm install eventsource --save
>
> # Using yarn
> yarn add eventsource
> ```
>
> ```js
> // EventSource.ts
> var Source = require('event-source');
> global.EventSource = Source;
> ```

# Will Update Documentation Soon!

<!-- ## Usage

```tsx
// App.tsx
import { Pocketbase } from 'react-pocketbase-hooks';

const serverURL = "YOUR_SERVER_URL"
const collections = ['COLLECTION_NAME_01', 'COLLECTION_NAME_02']
const webRedirectURL = "http://..."
const mobileRedirectURL = "expo://..." // for example

<Pocketbase
      serverURL={serverURL}
      initialCollections={collections}
      webRedirectURL={webRedirectURL}
      mobileRedirectURL={mobileRedirectURL}
      openURL={async (url) => {
        // for example expo WebBrowser
        await WebBrowser.openBrowserAsync(url);
      }}>
    <APP />
</Pocketbase>
```

## Caveats

```tsx
import { useAppContent, useAuth } from 'react-pocketbase-hooks';
```

### Records

Reading the records value directly accesses the Redux Store.

The value will be changed automatically by the following actions:

- [Initial Fetch](#initialfetch)
- [Initial Collections](#usage)
- [Subscribe](#subscribe)
- [Refetch](#refetch)

**Without** Initial Fetch

```tsx
// Corresponds to the stored Redux value, simply reads without making further PocketBase requests
const { records } = useAppContent('COLLECTION_NAME_01');
```

**With** Initial Fetch <a name="initialfetch"></a>

```tsx
// When initializing, the desired table is queried once and updated in Redux, records corresponds to the stored Redux value
const { records } = useAppContent('COLLECTION_NAME_01', true);
```

### Actions

```tsx
const { actions } = useAppContent('COLLECTION_NAME_01');
```

> _All following actions are performed on the desired table, in this case -> COLLECTION_NAME_01_
>
> ⚠️ **All actions will not return anything, they will just modify the Redux value according to their intention**

Subscribe <a name="subscribe"></a>

```tsx
actions.subscribe();
```

Unsubscribe

```tsx
actions.unsubscribe();
```

Refetch <a name="refetch"></a>

```tsx
actions.refetch();
```

Create

```tsx
const object = {};
actions.create(object);
```

Update

```tsx
const id = 'SOME_ID';
const object = {};
actions.update(id, object);
```

DELETE

```tsx
const id = 'SOME_ID';
actions.delete(id);
```

### Auth

```tsx
const { actions } = useAuth();
```

Register with Email <a name="subscribe"></a>

```tsx
await actions.registerWithEmail(email: string, password: string);
```

Sign-In with Email

```tsx
await actions.signInWithEmail(email: string, password: string);
```

Sign-In with Provider

```tsx
await actions.signInWithProvider(provider: string);
```

Submit Provider Result

```tsx
await actions.submitProviderResult(url: string);
```

Sign-Out

```tsx
actions.signOut();
```

Send password reset email

```tsx
await actions.sendPasswordResetEmail(email: string);
```

Send email verification

```tsx
await actions.sendEmailVerification(email: string);
```

Update profile

```tsx
await actions.updateProfile(id: string, record: {});
```

Update profile

```tsx
await actions.updateEmail(email: string);
```

Delete user

```tsx
await actions.deleteUser(id: string);
``` -->

---
_Source: https://npm.io/package/react-pocketbase-hooks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._