React

Use Pulsabase in React with hooks and context providers.

Installation

npm install @pulsabase/sdk @pulsabase/react

Setup

App.tsx

import { PulsabaseProvider } from '@pulsabase/react';

function App() {
  return (
    <PulsabaseProvider
      url="https://api.yourproject.pulsabase.io"
      clientKey="your-public-client-key"
      auth={{ autoRefreshToken: true }}
    >
      <YourApp />
    </PulsabaseProvider>
  );
}

Hooks

import { useQuery, useAuth, useRealtime } from '@pulsabase/react';

function UsersList() {
  // Fetch data
  const { data: users, loading } = useQuery(User, {
    where: { age: { $gte: 18 } },
    orderBy: { name: 'asc' },
  });

  // Auth
  const { user, signIn, signOut } = useAuth();

  // Realtime
  useRealtime(Message, 'INSERT', (newMessage) => {
    console.log('New message:', newMessage);
  });

  if (loading) return <div>Loading...</div>;

  return (
    <ul>
      {users?.map((u) => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}