React Hooks#

The @brandwave/react package wraps the TypeScript SDK with TanStack Query hooks. You get automatic caching, background refetching, optimistic updates, and loading states out of the box.

Installation#

bash

npm install @brandwave/react @brandwave/ts @tanstack/react-query

Provider setup#

Wrap your application with BrandwaveProvider to make the client available to all hooks.

tsx

import { BrandwaveProvider } from '@brandwave/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <BrandwaveProvider accessToken={process.env.BRANDWAVE_ACCESS_TOKEN}>
        <YourApp />
      </BrandwaveProvider>
    </QueryClientProvider>
  );
}

Authentication

The provider currently accepts access tokens from your dashboard. Organization API keys for server-side authentication are planned for a future release.

Using hooks#

Each SDK resource has corresponding hooks for queries and mutations.

tsx

import { useListActivities } from '@brandwave/react';

function ActivitiesDashboard() {
  const { data, isLoading, error } = useListActivities({
    organizationId: 'org_123',
    pageIndex: 0,
    pageSize: 10,
  });

  if (isLoading) return <p>Loading activities...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data?.items.map((activity) => (
        <li key={activity.id}>
          {activity.channel} — {activity.activity}
        </li>
      ))}
    </ul>
  );
}

Available hooks#

All hooks follow the TanStack Query conventions. Query hooks return the standard UseQueryResult object, and mutation hooks return UseMutationResult.

Query hooks#

useListActivities — Paginated activity list
useActivity — Single activity by ID
useListCreators — Paginated creator list
useCreator — Single creator by ID
useCampaign — Single campaign by ID

Mutation hooks#

useCreateActivity — Create a new activity
useUpdateActivity — Update an existing activity
useDeleteActivity — Delete an activity
useCreateCreator — Add a new creator