I am rendering cryptocurrency cards components and since they are more than a thousand cards, I need to paginate them. I am giving the cardsPerPage manually so sometimes on different screens it look weird. I need to find a way so they can cover the entire page.
const [pageNumber, setPageNumber] = useState(0);
const cardsPerPage = 28;
const pagesVisited = pageNumber * cardsPerPage;
const displayCards = coinData
.slice(pagesVisited, pagesVisited + cardsPerPage)
.map((coin) => (
<CryptoCard
iconUrl={Logo}
name={coin.name}
URL={"www.binance.com"}
duration="4 minutes ago"
label1={"Price"}
data1={coin.quotes.USD.price}
label2="Exchanges: "
data2="Binance"
label3="Symbol:"
data3={coin.symbol}
label4="Pair"
data4={coin.pair}
label5="Volume: "
data5={coin.quotes.USD.volume_24h}
/>
));
const pageCount = Math.ceil(coinData.length / cardsPerPage);
const changePage = ({ selected }) => {
setPageNumber(selected);
};
Determine how many cards are better by screen size, and you can set the amount cards per screen size maybe with a switch, for example:
const cardsPerPage = () => {
const screenWidth = window.screen.width;
if(screenWidth < 576){ //Mobile Screens extra small
return 10; //10 cards
} else if (screenWidth >= 576 && screenWidth < 768) { //small
return 15; //15 cards
} else if (screenWidth >= 768 && screenWidth < 992) { //medium
return 20; //20 cards
} else if (screenWidth >= 992 && screenWidth < 1200) { //large
return 40; //40 cards
} else if (screenWidth >= 1200) { //extra-large
return 100; //100 cards
}
}
Also, you can set the number of cols that you want to manage per screen size, I recommend you work with Bootstrap 5 to manage the responsive design and also take advantage of other functionalities and components.