Estoy renderizando componentes de tarjetas de criptomonedas y como son más de mil tarjetas, necesito paginarlas. Estoy dando las cardsPerPage por página manualmente, por lo que a veces en diferentes pantallas se ven raras. Necesito encontrar una manera para que puedan cubrir toda la página.
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 cuántas tarjetas son mejores por tamaño de pantalla, y puede establecer la cantidad de tarjetas por tamaño de pantalla, tal vez con un interruptor, por ejemplo:
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 } }Además, puedes configurar la cantidad de cols que deseas administrar por tamaño de pantalla, te recomiendo trabajar con Bootstrap 5 para administrar el diseño receptivo y también aprovechar otras funcionalidades y componentes.