swr-pagination-adapter 1.0.13
Install from the command line:
Learn more about npm packages
$ npm install @faablecloud/swr-pagination-adapter@1.0.13
Install via package.json:
"@faablecloud/swr-pagination-adapter": "1.0.13"
About this version
Pagination adapter to Vercel `SWR` data fetching
With NPM:
npm install @faablecloud/swr-pagination-adapterimport { useSWRPaginated } from "@faablecloud/swr-pagination-adapter";
interface DataType {
name: string;
color: string;
}
const ListComponent = () => {
const { data, isReachingEnd, setSize } = useSWRPaginated<DataType>(
`/recipes?query=label:babies`,
{ pageSize: 5 }
);
return (
<>
{!data && <p>No Data</p>}
{data.map((obj) => (
<Item {...obj} />
))}
{!isReachingEnd && (
<button onClick={() => setSize(size + 1)}>Load more</button>
)}
</>
);
};Another example:
const ListComponent = () => {
const params = new URLSearchParams({query:"label:babies"});
/*
const params2 = new URLSearchParams({
query:["label:babies","label:freeze"].join(" "),
category:"tag_XXXX"
});
*/
const { data, isReachingEnd, setSize } = useSWRPaginated<DataType>(
`/recipes?${params}`,
{ pageSize: 5 }
);
return (
<>
{!data && <p>No Data</p>}
{data.map((obj) => (
<Item {...obj} />
))}
{!isReachingEnd && (
<button onClick={() => setSize(size + 1)}>Load more</button>
)}
</>
);
};