swr-pagination-adapter 1.0.18
Install from the command line:
Learn more about npm packages
$ npm install @faablecloud/swr-pagination-adapter@1.0.18
Install via package.json:
"@faablecloud/swr-pagination-adapter": "1.0.18"
About this version
Pagination adapter to Vercel `SWR` data fetching
With Yarn:
yarn add @faablecloud/swr-pagination-adapterWith 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>
)}
</>
);
};[!IMPORTANT] You have to polyfill
URL()module fromnode:urlto use this package in react native.
Locate your JavaScript entry-point file, commonly called index.js at the root of your React Native project.
import "react-native-url-polyfill/auto";