pocketbase-react
v0.1.28
Published
Unofficial React SDK (React, React Native, Expo) for interacting with the PocketBase JS SDK
Downloads
96
Maintainers
Readme
PocketBase React SDK
Unofficial React SDK (React, React Native, Expo) for interacting with the PocketBase JS SDK.
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 aEventSource
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:
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);
Auth
const { actions } = useAuth();
Register with Email
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);