Popstand Components

This library provides reusable components and hooks in React and Next.js projects. It relies on Chakra UI for the components, Firebase v9 and SWR for efficient pagination.

Installation

Make sure to install Chakra UI as it is a peer dependency for this library:

npm install @chakra-ui/react firebase swr

OR

yarn add @chakra-ui/react firebase swr

Then, install the library:

npm install popstand-components

OR

yarn add popstand-components

API Reference

usePagination

Custom hook for paginating data from a Firebase Firestore collection.

Parameters:

• collectionRef: CollectionReference<DocumentData> - Reference to the Firestore collection.
• constraints?: any[] (optional) - Additional constraints to apply to the Firestore query.
• pageSize?: number (optional) - Number of items per page. Default is 10.
• swrConfig?: SWRConfiguration (optional) - Configuration options for the SWR library.

Returns:

An object with the following properties:

• count: number - Total number of items in the collection.
• page: number - Current page number (0-indexed).
• setPage: function - Function to set the current page.
• rows: T[] - Array of items on the current page.
• hasNextPage: boolean - Indicates if there is a next page.
• hasPreviousPage: boolean - Indicates if there is a previous page.
• isLoading: boolean - Indicates if data is currently being loaded.
• isError: boolean - Indicates if an error occurred while fetching data.
• mutation: function - Function to trigger a data mutation.

Example:

import { usePagination } from 'react-firebase-chakra-pagination'
import { collection, getFirestore } from 'firebase/firestore'
import { Container, Heading } from '@chakra-ui/react'

const MyComponent = () => {
  const [rowsPerPage, setRowsPerPage] = useState(10)
  const firestore = getFirestore()
  const collectionRef = collection(firestore, 'your-collection')

  const {
    count,
    page,
    setPage,
    rows,
    hasNextPage,
    hasPreviousPage,
    isLoading,
    isError,
    mutation,
  } = usePagination({
    collectionRef,
    pageSize: rowsPerPage,
  })

  // Your component logic here

  return (
    <Container>
      <Heading>My Paginated Component</Heading>
      {/* Your component UI here */}
    </Container>
  )
}

export default MyComponent

This example demonstrates how to use the usePagination hook in a React component. Customize the hook parameters and integrate it into your component logic as needed.