The ID of the project for which categories are being fetched. If
undefined, the hook will not fetch categories.
An optional object to specify additional parameters such as page and limit for pagination.
The returning object contains:
categories: The list of fetched categories.create: CategoriesCreateMethod - Function to create a new category.currentPage: The current page of fetched categories (pagination state).fetchMore: CategoriesFetchMoreMethod - Function to load more categories, either
appending or refreshing the existing list.fetched: Boolean indicating whether the categories have been fetched.hasMore: Boolean indicating if there are more categories to fetch.refetch: CategoriesFetchMethod - Function to refetch the categories list.usePagination hook is used to manage the pagination state,
including appending new pages, refreshing data, and checking for more pages.useEffect hook is used to initiate the initial data fetch and
subsequent fetches whenever the projectId or params.page changes.Error object.fetchCategories retrieves the initial categories, optionally
suppressing state updates with a quiet flag. fetchMore loads additional pages, either
refreshing the existing list or appending new data.import { useCategories } from 'react-playmakers';
// Using the hook in a component
const CategoriesComponent = () => {
const {
categories,
create,
fetched,
hasMore,
currentPage,
fetchMore,
refetch
} = useCategories('pXXXXXXXX', { page: 1, limit: 10 });
// Handle creating a new category
const handleCreateCategory = async () => {
try {
const newCategory = await create({ name: 'New Category' });
console.log('Category created:', newCategory);
} catch (error) {
console.error('Error creating category:', error);
}
};
//Handle loading more categories
const loadMoreCategories = async () => {
if (hasMore) {
try {
await fetchMore();
console.log('More categories loaded!');
} catch (error) {
console.error('Error loading more categories:', error);
}
} else {
console.log('No more categories to load.');
}
};
return (
<div>
<h1>Categories</h1>
{!fetched ? <p>Loading...</p> : (
<ul>
{categories.map((category) => (
<li key={category.id}>{category.name}</li>
))}
</ul>
)}
<button onClick={handleCreateCategory}>Create Category</button>
<button onClick={loadMoreCategories} disabled={!hasMore}>Load More</button>
<button onClick={refetch}>Refetch Categories</button>
</div>
);
};
Generated using TypeDoc
Custom React hook for managing categories within a specific project.