Unofficial React SDK (React, React Native, Expo) for interacting with the PocketBase JS SDK
npm install pocketbase-react
Unofficial React SDK (React, React Native, Expo) for interacting with the PocketBase JS SDK.
- Installation
- Usage
- Caveats
- Development
``shUsing 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;
>
`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
initialCollections={collections}
webRedirectURL={webRedirectURL}
mobileRedirectURL={mobileRedirectURL}
openURL={async (url) => {
// for example expo WebBrowser
await WebBrowser.openBrowserAsync(url);
}}>
`
`tsx`
import { useAppContent, useAuth } from 'pocketbase-react';
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');
`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);
`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
`tsx`
actions.subscribe();
Unsubscribe
`tsx`
actions.unsubscribe();
`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);
`tsx`
const { actions } = useAuth();
`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);