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 credentials = {
    username: 'YOUR_EMAIL',
    password: 'YOUR_PASSWORD'
}

<Pocketbase
    serverURL={serverURL}
    initialCollections={collections}
    credentials={credentials}>
    <APP />
</Pocketbase>

Caveats

import { useAppContent } = "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

Subscribe

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

Development

By using

npm run build
# or
yarn build

You will get a folder called dist, which you can use to replace node_modules/pocketbase-react/dist in your React project.

Maybe someone finds a better way to integrate the package in development with a project