Paginating a React App with Semantic UI

For this post I am going to explain how to create a simple pagination system using the Semantic UI library with React.

I am going to use the SWAPI api to have data to reference inside my example.

I am also going to use the Axios promise based library to give you an idea on how to fetch data online and link it into the Pagination component provided by Semantic UI.

To begin make sure you have installed Semantic UI into your React app. Instructions on how to do that can be found here.

After you have it installed and the css link inside your index.html you can now import the many different components offered to you, but for this example we are only going to be using the Pagination component.

import React from 'react';
import { Pagination } from 'semantic-ui-react';

const App = () => {
  return (<div className="App">
  	<Pagination />
  </div>);
};

export default App;

So now we are ready to use the Pagination component but what do we do with it and how can we get it to work properly? The Pagination component, like all components, have attributes you can set to control your components. You can see all of them in the documentation but we are only going to need to use a few of them in order to get it working.

The next step I am going to do is retrieve some data from my api and display it on in my application. Here is a blog post on useEffect and the documentation on useState if you need more.

import React, { useState, useEffect } from 'react';
import { Pagination } from 'semantic-ui-react';
import axios from 'axios';

const App = () => {
  const [data, setData] = useState([]);
  const [apiUrl, setApiUrl] = useState('https://swapi.co/api/people/');
  
  useEffect(() => {
  	axios.get(apiUrl).then(response => {
  		setData(response.data.results);
    });
  }, [apiUrl]);
  
  return (<div className="App">
  	<Pagination />
  </div>);
};

export default App;

In order to start paginating correctly we need to start utilizing some of the attribute options on our Paginate component.

import React, { useState, useEffect } from 'react';
import { Pagination } from 'semantic-ui-react';
import axios from 'axios';

const App = () => {
  const [data, setData] = useState([]);
  const [activePage, setActivePage] = useState(1);
  const [apiUrl, setApiUrl] = useState('https://swapi.co/api/people/');
  
  useEffect(() => {
  	axios.get(apiUrl).then(response => {
      setData(response.data.results);
    });
  }, [apiUrl]);
  
  const onChange = (e, pageInfo) => {
  	setActivePage(pageInfo.activePage);
    setApiUrl('https://swapi.co/api/people/?page=' + page.activePage.toString());
  };
  
  return (<div className="App">
  	<Pagination 
      activePage={activePage}
      onPageChange={onChange}
      totalPages={10}
      ellipsisItem={null}
    />
  </div>);
};

export default App;

The first thing I did was set the activePage attribute equal to the activePage variable I set in my state.

The second attribute, onPageChange, will run a given function when the component detects a new page number clicked. Its first parameter will be the event object and the second is an object with the information passed into the component. The property we want to use is the activePage property.

After I set the active page I then update my api url. My useEffect function is watching to see if there are any changes made to the apiUrl variable, if there are it will re-run the function given, in this case it will make a new HTTP request for more data from the api.

If you need more information working with Semantic UI or React feel free to comment below or book a session.