react-supabase-utils

React Supabase Utility Functions

This library offers utility functions to use when connecting a React app to a Supabase backend. Current in progress, will be updated as I work on my personal project.

Features

UseRealtime Hook

useRealtime allows connecting to a table in realtime, using just the table name. The returned data value contains the rows in the table defined by the tableName string, and is updated in realtime when the table updates. Requires the table on Supabase to support realtime connections.

The optional transformer argument allows you to pass a function that takes an argument of type T and returns something else. This allows you to change the data from the type in the table to another type.

const { data } = useRealtime<T>(supabaseUrl, supabaseAnonKey, tableName)
console.log(data)

SupabaseContext

The SupabaseContext allows access to a Supabase client anywhere in the app via the useSupabaseContext. Requires the scope to be encapsulted with the <SupabaseContextProvider> JSX element.

function App(props) {
  return (
    <SupabaseContextProvider supabaseUrl={supabaseUrl} supabaseAnonKey={supabaseAnonKey}>
      {props.children}
    </SupabaseContextProvider>
  )
}
// somewhere in `{props.children}`
function Component() {
  const { supabase } = useSupabaseContext()
}