PocketBase React SDK

![Npm package version](https://npmjs.com/package/pocketbase-react)

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

- Installation
- Usage
- Caveats
- Development

Installation

$3

sh

Using npm

npm install pocketbase-react  --save



#Using yarn

yarn add pocketbase-react

tsx

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

>

>

sh

> # Using npm

> npm install eventsource --save

>

> # Using yarn

> yarn add eventsource

>



>

>

js

> // EventSource.ts

> var Source = require('event-source');

> global.EventSource = Source;

>





Usage

tsx

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



      serverURL={serverURL}

      initialCollections={collections}

      webRedirectURL={webRedirectURL}

      mobileRedirectURL={mobileRedirectURL}

      openURL={async (url) => {

        // for example expo WebBrowser

        await WebBrowser.openBrowserAsync(url);

      }}>





Caveats

tsx

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





$3



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

tsx

// Corresponds to the stored Redux value, simply reads without making further PocketBase requests

const { records } = useAppContent('COLLECTION_NAME_01');





With Initial Fetch

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

$3

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

tsx

actions.subscribe();





Unsubscribe

tsx

actions.unsubscribe();





Refetch

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

$3

tsx

const { actions } = useAuth();





Register with Email

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

PocketBase React SDK

Installation

$3

sh

Using npm

npm install pocketbase-react  --save



#Using yarn

yarn add pocketbase-react

tsx

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

>

>

sh

> # Using npm

> npm install eventsource --save

>

> # Using yarn

> yarn add eventsource

>



>

>

js

> // EventSource.ts

> var Source = require('event-source');

> global.EventSource = Source;

>





Usage

tsx

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



      serverURL={serverURL}

      initialCollections={collections}

      webRedirectURL={webRedirectURL}

      mobileRedirectURL={mobileRedirectURL}

      openURL={async (url) => {

        // for example expo WebBrowser

        await WebBrowser.openBrowserAsync(url);

      }}>





Caveats

tsx

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





$3



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

tsx

// Corresponds to the stored Redux value, simply reads without making further PocketBase requests

const { records } = useAppContent('COLLECTION_NAME_01');





With Initial Fetch

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

$3

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

tsx

actions.subscribe();





Unsubscribe

tsx

actions.unsubscribe();





Refetch

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

$3

tsx

const { actions } = useAuth();





Register with Email

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

testing-pocketbase-react

PocketBase React SDK

Installation

$3

Using npm

Usage

Caveats

$3

$3

$3

testing-pocketbase-react

PocketBase React SDK

Installation

$3

Using npm

Usage

Caveats

$3

$3

$3