Package Exports

pocketbase-react
pocketbase-react/es/index.js
pocketbase-react/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (pocketbase-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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

actions.subscribe();

Unsubscribe

actions.unsubscribe();

Refetch

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);