Pagination based on characters on the page-CodePudding

I am developing a blog site using ReactJS, I want when the user clicks to view the full content, instead of the scrolling behaviour we get on most blog sites, I want a page-by-page view as we have in PDF reader, where the user clicks on the button and will be taken to a new page as he continues reading.

How do I limit the number of characters on each page regardless of the number of words? eg: If the author posted 2000 words, I will only display 500 words on the first page and when the user clicks "next" button it moves to another page with 500 words, till the user gets to the last words in the article.

How I want it to look

Here is the code

export default function Read() {
return (
    <div className="h-screen">
        <div className="flex items-center justify-between  w-screen h-[45px] z-10 bg-white drop-shadow-lg top-0">
            <Link className="flex items-center text-white bg-indigo-800 h-full" href="/"><ArrowLeftIcon
                className="w-6 text-white active:text-white"/><span>Home</span></Link>
            <div className="text-sm font-bold ">
                <p>Book Title will be here</p>
            </div>
            <div className="text-xs font-bold ">
                <p>Page 1</p>
            </div>

            <div className=" ">
                <AdjustmentsHorizontalIcon className="w-7 text-indigo-900 active:text-white"/>
            </div>
        </div>

        <div className="px-1.5 bg-zinc-300 shadow-lg">
            <p className="bg-white px-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Beatae dolor dolores incidunt, ipsa ipsam iure labore maiores
                nobis nulla, odio omnis placeat quod, reiciendis. Cum deleniti
                fugit laudantium repudiandae velit? Dicta dolorem explicabo fuga
                illum incidunt itaque laboriosam magni necessitatibus numquam
                perspiciatis qui quis, quo recusandae, rerum similique temporibus
                tenetur!
                <br/>
                <br/>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Beatae dolor dolores incidunt, ipsa ipsam iure labore maiores
                nobis nulla, odio omnis placeat quod, reiciendis. Cum deleniti
                fugit laudantium repudiandae velit? Dicta dolorem explicabo fuga
                illum incidunt itaque laboriosam magni necessitatibus numquam
                perspiciatis qui quis, quo recusandae, rerum similique temporibus
                tenetur!
                <br/>
                <br/>
                fugit laudantium repudiandae velit? Dicta dolorem explicabo fuga
                illum incidunt itaque laboriosam magni necessitatibus numquam
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum
                eius eligendi enim expedita ipsum iusto nemo, nisi perspiciatis
                quis vitae!
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad aspernatur aut deleniti doloremque eius eos eveniet, expedita facilis labore magni,
            </p>

        </div>
        <div className="pagination fixed bottom-0 left-0 right-0">
            <div className="active:bg-red-300 rounded-3xl">
                <ArrowLeftCircleIcon className="w-10 text-indigo-600"/>
            </div>

            <div className="active:bg-red-300 rounded-3xl">
                <ArrowRightCircleIcon className="w-10 text-indigo-600"/>
            </div>
        </div>
    </div>
)}

CodePudding user response：

One way to approach this is that, you can split the "article", say 2000 words, into 4 sections with each section a index attribute attached to it, and store it into the database at the beginning, when fetching the next page, you can query the previousIndex 1 for the next section, and send it back to the client.