Awesome

PocketBase React SDK

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

Installation
Usage
Caveats
Development

Installation

React, React Native or Expo

# Using npm
npm install pocketbase-react  --save

#Using yarn
yarn add pocketbase-react

import { Pocketbase } from 'pocketbase-react';

🔧 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
# Using npm
npm install eventsource --save

# Using yarn
yarn add eventsource
// EventSource.ts
var Source = require('event-source');
global.EventSource = Source;

Usage

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

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

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

Records

Reading the records value directly accesses the Redux Store.

The value will be changed automatically by the following actions:

Initial Fetch
Initial Collections
Subscribe
Refetch

Without Initial Fetch

// 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>

// 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

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>

actions.subscribe();

Unsubscribe

actions.unsubscribe();

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

actions.refetch();

Create

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

Update

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

DELETE

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

Auth

const { actions } = useAuth();

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

Sign-In with Email

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

Sign-In with Provider

await actions.signInWithProvider(provider: string);

Submit Provider Result

await actions.submitProviderResult(url: string);

Sign-Out

actions.signOut();

Send password reset email

await actions.sendPasswordResetEmail(email: string);

Send email verification

await actions.sendEmailVerification(email: string);

Update profile

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

Update profile

await actions.updateEmail(email: string);

Delete user

await actions.deleteUser(id: string);