useCollection

Hook to subscribe to a Firestore collection with real-time updates.

Usage

Automatically sets up a snapshot listener on a collection or query and returns the live data. Unsubscribes when the component unmounts.

PostList.tsx

import { useCollection } from 'refirebase/react';

export function PostList() {
  const { data, loading, error } = useCollection('posts', {
    where: [{ field: 'published', op: '==', value: true }],
    orderBy: [{ field: 'createdAt', direction: 'desc' }],
    limit: 10
  });

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

  return (
    <ul>
      {data.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  );
}

Parameters

Param	Type	Description
`collectionName*`	`string`	The name of the collection.
`options`	`GetByCondition<T>`	Query options (where, orderBy, limit, etc.).

Return value

Returns

{ data: T[], loading: boolean, error: unknown | null }

The real-time list of documents, loading state, and any error encountered.