title: How can i limit the amount of pages shown in pagination
body: <p>I am building a pagination component using React and after i used it i realised that it was showing all the pages and as a result expanded the entire page so that you have to scroll accross to view the rest of the pages. How can i limit it only to 20 pages and allow the number of pages to go up each time without taking up space?</p>
  
  <p>The furthest i got to logic was this. </p>
  
  <p><strong>if (numberOfPages > 20 ) {
               return 
          }</strong></p>
  
  <p>numberOfPages returns the total amount of pages.</p>
  
  <p>I am not sure on what method to use for a task like this. </p>
  
  <p>Here is my code. </p>
  
  <pre><code>
  const Pagination = ({ numberOfPages, page, setPage }: any) =&gt; {
    const pageNumbers = (numberOfPages: number) =&gt; {
      let pages = [];
      for (let i = 1; i &lt;= numberOfPages; i++) {
        pages.push(
          &lt;span
            key={i}
            onClick={e =&gt; setPage(i)}
            className={page === i ? "active" : ""}
          &gt;
            {i}
          &lt;/span&gt;
        );
          // if (numberOfPages &gt; 20 ) {
          //      return 
          // }
      }
      return pages;
    };
  
    return (
      &lt;div className="pagination"&gt;
        &lt;div className="page-numbers"&gt;
          &lt;span
            onClick={e =&gt; (page === 1 ? {} : setPage(page - 1))}
            className={page === 1 ? "disabled" : ""}
          &gt;
            &amp;laquo;
          &lt;/span&gt;
          {pageNumbers(numberOfPages)}
          &lt;span
            onClick={e =&gt; (page === numberOfPages ? {} : setPage(page + 1))}
            className={page === numberOfPages ? "disabled" : ""}
          &gt;
            &amp;raquo;
          &lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Pagination; ```
  
  
  
  
  
  </code></pre>