use-supabase-hooks

use-supabase-hooks contains react hooks for common supabase functions, with type safety!

Demo: https://use-supabase-hooks.vercel.app

Installation

use-supabase-hooks is available as a npm package, you can install it using your preferred package manager.

$ npm i use-supabase-hooks

Usage

Currently use-supabase-hooks exports a total of 8 hooks, using them is pretty straight forward. The list of hooks along with their usage is below:

using the useUser hook:

import { useUser } from "use-supabase-hooks";

const { user, loading, error } = useUser(client);

In the above example, client is the Supabase client, and the hook returns the current user, loading and error state.

using the useAuth hook

Signing Up using email and password combination:

import { useAuth } from "use-supabase-hooks";

const { signIn, signUp } = useAuth(client);

const { user, session, error } = await signIn({
  email: "[email protected]",
  password: "dusty-bun",
});

Signing In using email and password combination:

import { useAuth } from "use-supabase-hooks";

const { signIn } = useAuth(client);

const { user, session, error } = await signIn({
  email: "[email protected]",
  password: "dusty-bun",
  redirectTo: "http://localhost:3000/dashboard",
});

Signing In using third party providers

import { useAuth } from "use-supabase-hooks";

const { signIn } = useAuth(client);

const { user, session, error } = await signIn({
  provider: "google", // accepts any valid supabase provider
  redirectTo: "http://localhost:3000/dashboard",
});

using the useSelectData hook:

import { useSelectData } from "use-supabase-hooks";

const { data, loading, error } = useSelectData(client, "users", {
  picks: ["name", "email"], // columns to pick
  eqs: { id: 1 }, // equality conditions
});

using the useInsertData hook:

import { useInsertData } from "use-supabase-hooks";

const { data, loading, error } = useInsertData(client, "users", data: {
  id: 1,
  name: "Eddie Munson",
  email: "[email protected]",
});

using the useUpdateData hook:

import { useUpdateData } from "use-supabase-hooks";

const { data, loading, error } = useUpdateData(client, "users", data: {
  id: 1,
  name: "Eddie the Banished",
  email: "[email protected]",
}, eqs: { id: 1});