@usecolf/react

COLF React SDK with useColf hook and ColfProvider for effortless columnar data fetching in React.

Overview

@usecolf/react provides React hooks for fetching and decoding COLF API endpoints in client applications with built-in loading states, error handling, and cache management.

Features

• useColf Hook: Declarative data fetching hook that requests and unpacks COLF data.
• ColfProvider: Global configuration provider for API base URLs and options.
• TypeScript First: Full generic type safety for fetched datasets (useColf<User[]>(...)).

Installation

npm install @usecolf/react @usecolf/client
# or
pnpm add @usecolf/react @usecolf/client

Quick Start

TypeScript (.tsx)

import { useColf } from '@usecolf/react';

interface User {
  id: number;
  name: string;
}

function UserList() {
  const { data, loading, error } = useColf<User[]>('/api/users');

  if (loading) return <div>Loading COLF data...</div>;
  if (error) return <div>Error: {error.message}</div>;

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

JavaScript (.jsx)

import { useColf } from '@usecolf/react';

function UserList() {
  const { data, loading, error } = useColf('/api/users');

  if (loading) return <div>Loading COLF data...</div>;
  if (error) return <div>Error: {error.message}</div>;

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

License

MIT © COLF Team