Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tobicrain/pocketbase-react
Unofficial React SDK (React, React Native, Expo)
https://github.com/tobicrain/pocketbase-react
expo javascript pocketbase react react-native typescript
Last synced: 3 months ago
JSON representation
Unofficial React SDK (React, React Native, Expo)
- Host: GitHub
- URL: https://github.com/tobicrain/pocketbase-react
- Owner: tobicrain
- License: mit
- Created: 2022-10-02T20:46:51.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-11-30T21:11:19.000Z (about 2 years ago)
- Last Synced: 2024-10-07T08:09:18.756Z (4 months ago)
- Topics: expo, javascript, pocketbase, react, react-native, typescript
- Language: TypeScript
- Homepage:
- Size: 267 KB
- Stars: 66
- Watchers: 1
- Forks: 11
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-pocketbase - GitHub
- awesome-pocketbase - GitHub
- awesome-pocketbase - PocketBase React - Unofficial React SDK (React, React Native, Expo) for interacting with the PocketBase JavaScript SDK.  (React)
README
# PocketBase React SDK
[](https://npmjs.com/package/pocketbase-react)
Unofficial React SDK (React, React Native, Expo) for interacting with the [PocketBase JS SDK](https://github.com/pocketbase/js-sdk).
- [Installation](#installation)
- [Usage](#usage)
- [Caveats](#caveats)
- [Development](#development)
## Installation
### React, React Native or Expo
```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](https://github.com/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
{
// for example expo WebBrowser
await WebBrowser.openBrowserAsync(url);
}}>
```
## Caveats
```tsx
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](#initialfetch)
- [Initial Collections](#usage)
- [Subscribe](#subscribe)
- [Refetch](#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);
```
### Actions
```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);
```
### Auth
```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);
```