@supabase-kit/react NPM

get start

Hooks by management data from supabase and fetch data by react.

install

  npm i @supabase-kit/react

  bun add @supabase-kit/react

  pnpm add @supabase-kit/react

  yarn add @supabase-kit/react

create tools

import { createSupabaseTools } from '@supabase-kit/react';
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = '';

const supabaseKey = '';

export const supabase = createClient(supabaseUrl, supabaseKey);

export const {
    // query parsser object to client
    QueryBuilder,
    // hooks
    useSupabase,
    useSupaQuery,
    useSupaSession,
    useSupaRealtime,
    useSupaSubscription,
    useSupaInfiniteQuery,
} = createSupabaseTools(supabase);

useSupabase: return supabase client

'use client';
import React from 'react';
import { useSupabase } from '@/createSupabaseTools';

export const Example = () => {
    const supabase = useSupabase();

    return <div>{urls.panel.root}</div>;
};

useSupaQuery: query by fetch data

table — The name of the table to query.
column — Columns to select from the table.
count — Count type for the query.
options — Additional options for the query hook from @tanstack/react-query.
single — Flag indicating if a single row should be returned.
enabled — Flag to enable/disable the query execution.
where — condition by where how in, is, eq, neq, filter, etc.

'use client';
import { useSupabase } from '@/createSupabaseTools';

export const Example = () => {
    const book = useSupaQuery({
        table: 'book',
        where: {
            eq: { id: 1 },
        }
    });

    return <div>{JSON.stringify(book.data)}</div>;
};

useSupaRealtime: query by fetch data in realtime

table — The table to listen to.
where — A filter to apply to the subscription.
channel — The channel to subscribe to.

'use client';
import { useSupaRealtime } from '@/createSupabaseTools';

export const Example = () => {
    const book = useSupaRealtime({
        table: 'book',
        where: {
            key: 'id',
            operator: 'in',
            value: [1, 2, 5],
        },
    });

    return <div>{JSON.stringify(book.data)}</div>;
};

useSupaSubscription: query by fetch data in realtime with customn

table — The name of the table to subscribe to.
schema — The database schema to use.
event — Event type to listen for (e.g., INSERT, UPDATE, DELETE).
where — Filter object to specify conditions for events.
type — Type of event to listen for.
channel — Channel name for the subscription.
callback — Callback function to handle subscription payloads.

'use client';
import { useState } from 'react';
import { useSupaSubscription } from '@/createSupabaseTools';

export const Example = () => {
    const [subscription, setSubscription] = useState({});

    useSupaSubscription({
        event: '*',
        table: 'book',
        schema: 'public',
        channel: 'general',
        type: 'postgres_changes',
        callback(payload) {
            console.log(payload);
            setSubscription(payload);
        },
        where: {
            key: 'id',
            operator: 'in',
            value: [1, 2, 5],
        },
    });

    return <div>{JSON.stringify(subscription)}</div>;
};