https://github.com/awkweb/react-supabase

React Hooks library for Supabase
https://github.com/awkweb/react-supabase

hooks react supabase supabase-client

Last synced: 17 days ago
JSON representation

React Hooks library for Supabase

• Host: GitHub
• URL: https://github.com/awkweb/react-supabase
• Owner: awkweb
• License: mit
• Created: 2021-04-21T14:19:13.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-04-01T08:04:19.000Z (about 1 year ago)
• Last Synced: 2025-03-29T22:08:43.345Z (24 days ago)
• Topics: hooks, react, supabase, supabase-client
• Language: TypeScript
• Homepage: https://react-supabase.vercel.app
• Size: 2.62 MB
• Stars: 338
• Watchers: 6
• Forks: 26
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## Introduction

`react-supabase` is a React Hooks library for [Supabase](https://supabase.io).

Visit the [docs site](https://react-supabase.vercel.app) for more info.




## Installation

```

yarn add react-supabase @supabase/supabase-js

# or

npm install --save react-supabase @supabase/supabase-js

```




## Quick Start

Create a Supabase client and pass it to the `Provider`:

```tsx

import { createClient } from '@supabase/supabase-js'

import { Provider } from 'react-supabase'

const client = createClient('https://xyzcompany.supabase.co', 'public-anon-key')

const App = () => (

  

    

  

)

```

Now every component inside and under the `Provider` can use the Supabase client and hooks:

```tsx

import { useRealtime } from 'react-supabase'

const Todos = () => {

  const [result, reexecute] = useRealtime('todos')

  const { data, fetching, error } = result

  if (fetching) return 
Loading...

  if (error) return 
Oh no... {error.message}


  return (

    


      {data.map((todo) => (

        
{todo.title}

      ))}

    

  )

}

```





## License

The MIT License.