Show next and previous buttons without pagenumbers in ReactPaginate

Question

Im trying to show previous and next buttons only without page number in between.How can I achieve this using React Paginate. Image is attached here. Page numbers seem pretty ugly

Projects.js

import React,{useState,useEffect} from 'react';
import ta from './texta.png'
import pro from './Projects.json'
import ReactPaginate from 'react-paginate'

import Pagination from './Pagination';

export default function Projects(props) {
  let x = props.theme === 'dark' ? 'white' : 'black'

  const [projects, setprojects] = useState(pro)
  const [currpage, setcurrpage] = useState(0)
  const perpage=3
  const off=perpage*currpage
  // const [perpageprojects, setperpageprojects] = useState(projects.slice(0,2))
  // const pagehandler=(pagg)=>{
  //   setperpageprojects(projects.slice(pagg*2-2,pagg*2))
  // }
  const perpageprojs=projects.slice(off,off+perpage).map((x)=>{
    return <div>{x.id}</div>
  })
  const pageCount = Math.ceil(projects.length / perpage);
  function handlePageClick({ selected: selectedPage }) {
    setcurrpage(selectedPage);
}
const getbtn=()=>{
  return <><button className='btn btn-primary'>Next</button></>
}
const getpbtn=()=>{
  return <><button className='btn btn-primary'>Prev</button></>
}



  return (
    <>
      
[![enter image description here][1]][1]
      {perpageprojs}
      <ReactPaginate
        previousLabel={getpbtn()}
        nextLabel={getbtn()}
        pageCount={pageCount}
        onPageChange={handlePageClick}
        containerClassName={"pagination"}
        breakLabel="..."
       
       
      />
     




    </>
  );
}

I dont want the Page numbers to be displayed. Kindly let me know the way to manipulate this

Answer 1

You can define a class that sets display:none and then add that class to the following properties:

pageClassName and breakClassName

As shown below (not a runnable snippet):

<ReactPaginate
            ...
            pageClassName="page-item-none"
            ...
            breakClassName="page-item-none"
        />

.page-item-none {
  display: none;
}

Working example here