React paginate layout issue - reactjs

Question

I'm new with react and I'm trying to adapt my pagination to the design.
I'm not sure the react-paginate is the right one to use however I don't have much more expertise.
I managed to have something working but only with CSS, I don't like the hack approach.
is it possible to add Result found?
and page 1 of whatever?
my design should look like this:
But this is what I have at the moment:
And finally this is my react code:
<div className='paginate'>
<span className='result-found'>Result found</span>
<ReactPaginate
previousLabel="Back"
previousClassName="prev fa fa-caret-left"
nextLabel="Next"
nextClassName="next fa fa-caret-right"
breakLabel="..."
pageLinkClassName="page-link"
pageClassName="page"
breakClassName={""}
pageCount={total}
marginPagesDisplayed={1}
pageRangeDisplayed={4}
onPageChange={handlePageClick}
containerClassName="pagination"
subContainerClassName="pages pagination"
activeClassName="active"
/>
</div>

Answer 1

Here you go:
It is 90% CSS and 10% React. :D Edit the CSS for perfection. The code for the screenshot looks like this:
import { useEffect, useState } from "react";
import "./styles.css";
const PAGE_SIZE = 10;
export default function App() {
const [total, setTotal] = useState(42);
const [pageNo, setPageNo] = useState(0);
const maxPages = Math.ceil(total / PAGE_SIZE);
useEffect(() => {
// do your async call here
// set total
}, [pageNo]);
// take care of boundary condition like last and first pages
const onNext = () => pageNo < maxPages - 1 && setPageNo(pageNo + 1);
const onPrev = () => pageNo > 0 && setPageNo(pageNo - 1);
return (
<div className="App">
<div className="pagination-container">
<div className="pagination-left">
<span>{total} results found</span>
</div>
<div className="pagination-right">
<div className="pagination-current">
Page {pageNo + 1} of {maxPages}
</div>
<div className="pagination-buttons">
<div className="pagination-button-wrapper">
<button onClick={onPrev} className="pagination-button">
<
</button>
</div>
</div>
<div className="pagination-buttons">
<div className="pagination-button-wrapper">
<button onClick={onNext} className="pagination-button">
>
</button>
</div>
</div>
</div>
</div>
</div>
);
}
You can do usability enhancement by setting the buttons disabled={true} when the boundary condition reaches on first and last pages.
And the CSS is:
.pagination-container {
background-color: black;
display: flex;
justify-content: space-between;
padding: 1rem;
color: white;
}
.pagination-left {
display: flex;
align-items: center;
}
.pagination-right {
display: flex;
align-items: center;
}
.pagination-buttons {
display: flex;
margin-left: 0.5rem;
}
.pagination-buttons > * {
border: 1px solid white;
padding: 0.1rem 0.5rem;
}
.pagination-button {
background-color: transparent;
color: white;
border: 0;
}
Here also, you can edit CSS to match the exact style with arrows and buttons, and margins and paddings, and borders.
And a functional demo is here: https://codesandbox.io/s/zealous-ardinghelli-y4txu?file=/src/App.js
Larger Context: I assume you may want to reuse this component on multiple places. If so, you may want to extract out the logic into props. That means get rid of states and specialized logic (fetch data, in this case) to make it a stateless component by editing this component something like this:
interface Props {
onNext: () => void;
onPrev: () => void;
pageSize: number;
totalItems: number
}
export const PaginationBar = (props: Props) => {
// same code as above but no useEffect or useState
}
Now you have your own flexible pagination component. See here: https://codesandbox.io/s/eager-hermann-pjdt3?file=/src/App.js
You use it like this:
<Pagination
onNext={onNext}
onPrev={onPrev}
total={total}
pageNo={pageNo}
pageSize={10} />
Hope this helps!

Answer 2

React pagination come with minimum styling , anytime you can import demo css from github page
https://github.com/AdeleD/react-paginate/tree/master/demo/styles
in your component or
creating a styled component and customize your pagination all classes already include in your HTML like .active .first .last
or you can create custome styles for that class and append on your main.css