{"id":13409628,"url":"https://github.com/tobicrain/pocketbase-react","last_synced_at":"2025-10-05T23:41:43.263Z","repository":{"id":60698496,"uuid":"544583317","full_name":"tobicrain/pocketbase-react","owner":"tobicrain","description":"Unofficial React SDK (React, React Native, Expo)","archived":false,"fork":false,"pushed_at":"2022-11-30T21:11:19.000Z","size":273,"stargazers_count":72,"open_issues_count":3,"forks_count":11,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-23T09:43:17.552Z","etag":null,"topics":["expo","javascript","pocketbase","react","react-native","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tobicrain.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-10-02T20:46:51.000Z","updated_at":"2025-01-19T21:43:41.000Z","dependencies_parsed_at":"2022-10-03T09:10:18.188Z","dependency_job_id":null,"html_url":"https://github.com/tobicrain/pocketbase-react","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobicrain%2Fpocketbase-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobicrain%2Fpocketbase-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobicrain%2Fpocketbase-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobicrain%2Fpocketbase-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tobicrain","download_url":"https://codeload.github.com/tobicrain/pocketbase-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248806754,"owners_count":21164566,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["expo","javascript","pocketbase","react","react-native","typescript"],"created_at":"2024-07-30T20:01:02.430Z","updated_at":"2025-10-05T23:41:38.190Z","avatar_url":"https://github.com/tobicrain.png","language":"TypeScript","funding_links":[],"categories":["React","JavaScript/TypeScript"],"sub_categories":["React"],"readme":"# PocketBase React SDK\n\n[![Npm package version](https://badgen.net/npm/v/pocketbase-react)](https://npmjs.com/package/pocketbase-react)\n\nUnofficial React SDK (React, React Native, Expo) for interacting with the [PocketBase JS SDK](https://github.com/pocketbase/js-sdk).\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Caveats](#caveats)\n- [Development](#development)\n\n## Installation\n\n### React, React Native or Expo\n\n```sh\n# Using npm\nnpm install pocketbase-react  --save\n\n#Using yarn\nyarn add pocketbase-react\n```\n\n```tsx\nimport { Pocketbase } from 'pocketbase-react';\n```\n\n---\n\n\u003e 🔧 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.\n\u003e I recommend [EventSource/eventsource](https://github.com/EventSource/eventsource)\n\u003e\n\u003e ```sh\n\u003e # Using npm\n\u003e npm install eventsource --save\n\u003e\n\u003e # Using yarn\n\u003e yarn add eventsource\n\u003e ```\n\u003e\n\u003e ```js\n\u003e // EventSource.ts\n\u003e var Source = require('event-source');\n\u003e global.EventSource = Source;\n\u003e ```\n\n## Usage\n\n```tsx\n// App.tsx\nimport { Pocketbase } from 'pocketbase-react';\n\nconst serverURL = \"YOUR_SERVER_URL\"\nconst collections = ['COLLECTION_NAME_01', 'COLLECTION_NAME_02']\nconst webRedirectURL = \"http://...\"\nconst mobileRedirectURL = \"expo://...\" // for example\n\n\u003cPocketbase\n      serverURL={serverURL}\n      initialCollections={collections}\n      webRedirectURL={webRedirectURL}\n      mobileRedirectURL={mobileRedirectURL}\n      openURL={async (url) =\u003e {\n        // for example expo WebBrowser\n        await WebBrowser.openBrowserAsync(url);\n      }}\u003e\n    \u003cAPP /\u003e\n\u003c/Pocketbase\u003e\n```\n\n## Caveats\n\n```tsx\nimport { useAppContent, useAuth } from 'pocketbase-react';\n```\n\n### Records\n\nReading the records value directly accesses the Redux Store.\n\nThe value will be changed automatically by the following actions:\n\n- [Initial Fetch](#initialfetch)\n- [Initial Collections](#usage)\n- [Subscribe](#subscribe)\n- [Refetch](#refetch)\n\n**Without** Initial Fetch\n\n```tsx\n// Corresponds to the stored Redux value, simply reads without making further PocketBase requests\nconst { records } = useAppContent('COLLECTION_NAME_01');\n```\n\n**With** Initial Fetch \u003ca name=\"initialfetch\"\u003e\u003c/a\u003e\n\n```tsx\n// When initializing, the desired table is queried once and updated in Redux, records corresponds to the stored Redux value\nconst { records } = useAppContent('COLLECTION_NAME_01', true);\n```\n\n### Actions\n\n```tsx\nconst { actions } = useAppContent('COLLECTION_NAME_01');\n```\n\n\u003e _All following actions are performed on the desired table, in this case -\u003e COLLECTION_NAME_01_\n\u003e\n\u003e ⚠️ **All actions will not return anything, they will just modify the Redux value according to their intention**\n\nSubscribe \u003ca name=\"subscribe\"\u003e\u003c/a\u003e\n\n```tsx\nactions.subscribe();\n```\n\nUnsubscribe\n\n```tsx\nactions.unsubscribe();\n```\n\nRefetch \u003ca name=\"refetch\"\u003e\u003c/a\u003e\n\n```tsx\nactions.refetch();\n```\n\nCreate\n\n```tsx\nconst object = {};\nactions.create(object);\n```\n\nUpdate\n\n```tsx\nconst id = 'SOME_ID';\nconst object = {};\nactions.update(id, object);\n```\n\nDELETE\n\n```tsx\nconst id = 'SOME_ID';\nactions.delete(id);\n```\n\n### Auth\n\n```tsx\nconst { actions } = useAuth();\n```\n\nRegister with Email \u003ca name=\"subscribe\"\u003e\u003c/a\u003e\n\n```tsx\nawait actions.registerWithEmail(email: string, password: string);\n```\n\nSign-In with Email\n\n```tsx\nawait actions.signInWithEmail(email: string, password: string);\n```\n\nSign-In with Provider\n\n```tsx\nawait actions.signInWithProvider(provider: string);\n```\n\nSubmit Provider Result\n\n```tsx\nawait actions.submitProviderResult(url: string);\n```\n\nSign-Out\n\n```tsx\nactions.signOut();\n```\n\nSend password reset email\n\n```tsx\nawait actions.sendPasswordResetEmail(email: string);\n```\n\nSend email verification\n\n```tsx\nawait actions.sendEmailVerification(email: string);\n```\n\nUpdate profile\n\n```tsx\nawait actions.updateProfile(id: string, record: {});\n```\n\nUpdate profile\n\n```tsx\nawait actions.updateEmail(email: string);\n```\n\nDelete user\n\n```tsx\nawait actions.deleteUser(id: string);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftobicrain%2Fpocketbase-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftobicrain%2Fpocketbase-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftobicrain%2Fpocketbase-react/lists"}