Creando paginación de datos con reactjs

Hola amigos de la #nerdytud A veces sucede que necesitamos mostrar sendos datos en nuestro site, pero el tiempo de carga de la página, puede ser excesivo. Para ello, simplemente debemos realizar una paginación en los mismo, en este caso, utilicé una librería denominada react-infinite-scroller.

Crear aplicación

npx create-react-app dummy

cd dummy

Instalación de librería

npm i react-infinite-scroller

npm i axios

Importando las librerías

import { useState, useEffect } from 'react';
import axios from "axios";
import InfiniteScroll from "react-infinite-scroller";
import { makeStyles } from '@material-ui/core/styles';

Agregando estilos

const useStyles = makeStyles((theme) => ({
  container: {
    height: '400px',
    overflow: 'auto',
    '&::-webkit-scrollbar': {
      width: '0.4em'
    },
    "&::-webkit-scrollbar-thumb": {
      backgroundColor: 'gray',
      borderRadius: 5,
    },
    "&::-webkit-scrollbar-thumb:hover": {
      backgroundColor: 'tomato',
    },
  },
  data: {
    margin: 10,
    padding: 10,
  }
}));

Obtener datos

const fetchData = () => {
  axios
    .get(`https://jsonplaceholder.typicode.com/todos?_limit=${query.limit}`)
    .then(res => {
      setData(res.data);

      let limit = query.limit + query.start;
      setQuery({ ...query, limit: limit });
    })
    .catch(err => {
      console.error(err);
    });
}

Visualizar datos con scroll

  return (
    <div className={classes.container}>
      <InfiniteScroll
        pageStart={query.start}
        loadMore={fetchData}
        hasMore={true}
        useWindow={false}
      >
        {
          data.map
            ((row, index) => (
              <div key={index} className={classes.data}>
                {row.id} - {row.title}
              </div>
            ))
        }
      </InfiniteScroll>
    </div>);

Código completo

import { useState, useEffect } from 'react';
import axios from "axios";
import InfiniteScroll from "react-infinite-scroller";
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  container: {
    height: '400px',
    overflow: 'auto',
    '&::-webkit-scrollbar': {
      width: '0.4em'
    },
    "&::-webkit-scrollbar-thumb": {
      backgroundColor: 'gray',
      borderRadius: 5,
    },
    "&::-webkit-scrollbar-thumb:hover": {
      backgroundColor: 'tomato',
    },
  },
  data: {
    margin: 10,
    padding: 10,
  }
}));

function InfiniteList() {
  const classes = useStyles();

  const [data, setData] = useState([]);

  const [query, setQuery] = useState({ start: 25, limit: 25 });

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = () => {
    axios
      .get(`https://jsonplaceholder.typicode.com/todos?_limit=${query.limit}`)
      .then(res => {
        setData(res.data);

        let limit = query.limit + query.start;
        setQuery({ ...query, limit: limit });
      })
      .catch(err => {
        console.error(err);
      });
  }

  return (
    <div className={classes.container}>
      <InfiniteScroll
        pageStart={query.start}
        loadMore={fetchData}
        hasMore={true}
        useWindow={false}
      >
        {
          data.map
            ((row, index) => (
              <div key={index} className={classes.data}>
                {row.id} - {row.title}
              </div>
            ))
        }
      </InfiniteScroll>
    </div>);
}

export default InfiniteList;

Ejecutar aplicación

npm start