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.tsvarSource=require('event-source');global.EventSource=Source;

Usage

// App.tsximport{Pocketbase}from'pocketbase-react';constserverURL="YOUR_SERVER_URL"constcollections=['COLLECTION_NAME_01','COLLECTION_NAME_02']constwebRedirectURL="http://..."constmobileRedirectURL="expo://..."// for example<PocketbaseserverURL={serverURL}initialCollections={collections}webRedirectURL={webRedirectURL}mobileRedirectURL={mobileRedirectURL}openURL={async(url)=>{// for example expo WebBrowserawaitWebBrowser.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 requestsconst{ 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 valueconst{ 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

actions.subscribe();

Unsubscribe

actions.unsubscribe();

Refetch

actions.refetch();

Create

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

Update

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

DELETE

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

Auth

const{ actions }=useAuth();

Register with Email

awaitactions.registerWithEmail(email: string,password: string);

Sign-In with Email

awaitactions.signInWithEmail(email: string,password: string);

Sign-In with Provider

awaitactions.signInWithProvider(provider: string);

Submit Provider Result

awaitactions.submitProviderResult(url: string);

Sign-Out

actions.signOut();

Send password reset email

awaitactions.sendPasswordResetEmail(email: string);

Send email verification

awaitactions.sendEmailVerification(email: string);

Update profile

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

Update profile

awaitactions.updateEmail(email: string);

Delete user

awaitactions.deleteUser(id: string);