{"id":15062165,"url":"https://github.com/limitkr/supabase-hooks","last_synced_at":"2025-10-04T22:31:00.031Z","repository":{"id":131782549,"uuid":"611738746","full_name":"limitkr/supabase-hooks","owner":"limitkr","description":"react hooks for Supabase","archived":true,"fork":false,"pushed_at":"2023-04-11T16:34:02.000Z","size":95,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-08T19:04:08.498Z","etag":null,"topics":["react","react-hooks","supabase","supabase-hooks"],"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/limitkr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-09T12:54:36.000Z","updated_at":"2023-08-17T13:52:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"2649e31f-b600-4753-99ae-c3be1d99f78b","html_url":"https://github.com/limitkr/supabase-hooks","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/limitkr/supabase-hooks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/limitkr%2Fsupabase-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/limitkr%2Fsupabase-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/limitkr%2Fsupabase-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/limitkr%2Fsupabase-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/limitkr","download_url":"https://codeload.github.com/limitkr/supabase-hooks/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/limitkr%2Fsupabase-hooks/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278386093,"owners_count":25978109,"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","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["react","react-hooks","supabase","supabase-hooks"],"created_at":"2024-09-24T23:31:23.627Z","updated_at":"2025-10-04T22:30:59.753Z","avatar_url":"https://github.com/limitkr.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# supabase-hooks\n\nReact hooks library for [Supabase](https://github.com/supabase/supabase) ⭐\n\n# Contents\n\n1. [Install](#install)\n2. [Usage](#usage)\n   - [NextJS Example](#nextjs-example)\n3. [Run the Test](#run-the-test)\n4. [API](#api)\n   - [useClient](#useclientt)\n   - [useDatabase](#usedatabasetfrom)\n   - [unstable_useDatabase](#unstableusedatabasefrom-options)\n\n\n# Install\n\n```shell\nnpm install @limitkr/supabase-hooks\n# or yarn package manager\nyarn add @limitkr/supabase-hooks\n```\n\n\u003e :warning: This is an experimental repo, still under development.\n\n# Usage\n\n## NextJS Example\n\nImport the `\u003cSHProvider /\u003e` at the project root:\n\n```tsx\nimport { createClient } from \"@supabase/supabase-js\";\nimport { SHProvider } from \"@limitkr/supabase-hooks\";\nimport type { AppProps } from \"next/app\";\n\nimport type { Database } from \"database.types\"; // Supabase Database types\n\nconst client = createClient\u003cDatabase\u003e(\n  /* Supabase URL */,\n  /* Supabase Key */\n);\n\nexport default function MyApp({ Component, pageProps }: AppProps) {\n  return (\n    \u003cSHProvider supabaseClient={client}\u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/SHProvider\u003e\n  )\n}\n```\n\nAnd use the hook you want anywhere on the page.\n\n```tsx\nimport { useDatabase } from \"@limitkr/supabase-hooks\";\n\nimport type { Database } from \"database.types\"; // Supabase Database types\n\nexport default function MyPage() {\n  const { data: posts, isLoading } = useDatabase\u003cDatabase, \"posts\"\u003e(\"posts\");\n  return isLoading ? (\n    \u003cdiv\u003eLoading...\u003c/div\u003e\n  ) : (\n    \u003cdiv\u003e\n      {posts.map((post) =\u003e (\n        \u003cp\u003e{post.title}\u003c/p\u003e\n      ))}\n    \u003c/div\u003e\n  );\n}\n```\n\n# Breaking changes\n\nFrom version v1.0.0-beta.6, the second generic type must be put in the `useDatabase` hook to provide the correct type hint. For example:\n\n```ts\nconst { data } = useDatabase\u003cDatabase, \"posts\"\u003e(\"posts\");\n```\n\n# Use unstable feature\n\n\u003e :warning: This feature is still in the experimental stage. \n\u003e You may experience unintended bugs!\n\nTo use the hooks that are currently in development, you can \nimport the exported hooks from the unstable folder.\nThis package allows data fetching to be used with filters and uses \nbetter type definitions exported from Supabase.\n\n```ts\nimport { unstable_useDatabase } from \"@limitkr/supabase-hooks/unstable\"\n```\n\nCheck the [documentation](src/hooks/unstable/README.md).\n\n# Run the Test\n\nThis project uses Jest's `setupFiles` feature to change the process.env variable before running the test. So you need to\nread the description below if you want to run the test.\n\n## Setup\n\nAt the root of the project, create a _.jest_ folder. You can also create it with the command below:\n\n```shell\nmkdir .jest\n```\n\nAnd then create the _setEnvVar.js_ file in the folder. assign the env variables in the _setEnvVar.js_.\n\n```js\n// .jest/setEnvVar.js\n\nprocess.env.SUPABASE_URL = /* Your Supabase URL */\nprocess.env.SUPABASE_ANON_KEY = /* Your Supabase Key */\n```\n\nAnd create new empty supabase instance for testing, and create a new table like the image below.\n\n\u003cimg width=\"669\" alt=\"create table example\" src=\"https://user-images.githubusercontent.com/51485489/225901028-8f1b00e8-cc8d-4c16-a316-a3dfdfecd4a8.png\"\u003e\n\nNow you can run the test!\n\n# API\n\n## `useClient\u003cD\u003e()`\n\n```ts\nconst useClient = \u003cD extends BaseDatabase\u003e() =\u003e\n  ReturnType\u003ctypeof createClient\u003cD\u003e\u003e;\n```\n\nReturns the Supabase client.\n\n## `useDatabase\u003cD, K\u003e(from)`\n\n```ts\nconst useDatabase = \u003cD extends BaseDatabase = any\u003e(\n  from: TableKey\u003cD\u003e,\n  options: UseDatabaseOptions\n) =\u003e {\n  return { data, isLoading, insertData, updateData, upsertData, deleteData };\n};\n```\n\nReturns 4 Supabase database methods: `insert`, `update`, `delete`, `upsert`. Returns 2 Variables:\n\n- `isLoading` - Variable that indicate whether data is being loaded.\n- `data` - fetched data that Select a table using the 'key' value defined in the `from` parameter.\n\nYou can use filtering in some database methods. For example, to delete data when a specific ID matches:\n\n```tsx\nimport { useDatabase } from \"@limitkr/supabase-hooks\";\n\nexport default function Example() {\n  const { deleteData } = useDatabase\u003cDatabase, \"posts\"\u003e(\"posts\");\n\n  return (\n    \u003cbutton onClick={async () =\u003e await deleteData.eq(\"id\", 1)}\u003eDelete\u003c/button\u003e\n  );\n}\n```\n\n\u003e :warning: In the data fetch(`select`) method, filtering options will be added soon.\n\n### `from: K extends TableKey\u003cD\u003e | string`\n\nThe table name to operate on.\n\n\u003e :information_source: If you use a database type extracted from 'Supabase' into the generic type, you can get a better type hint.\n\n### `options: UseDatabaseOptions`\n\n```ts\ninterface UseDatabaseOptions {\n  selectSingle?: boolean;\n  disableFetch?: boolean;\n}\n```\n\n#### `selectSingle: boolean`\ndefault: `false`\n\nIf `true`, one single object type is returned, not an array type. This is the same method as below.\n\n```ts\nawait supabaseClient.from(/* from */).select().single();\n```\n\n#### `disableFetch: boolean`\n\ndefault: `false`\n\nIf `true`, the `useDatabase` hook does not automatically fetch data. This is useful if you want to use the \n`useDatabase` hook for data insertion or delete methods.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flimitkr%2Fsupabase-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flimitkr%2Fsupabase-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flimitkr%2Fsupabase-hooks/lists"}