Introducing React Paginating 🎉🎉🎉 – Dzung Nguyen – Medium

Introducing React Paginating 🎉🎉🎉 @davidnguyen1791 

#Reactjs #Javascript #Webdev #Tech

  • Introducing React Paginating 🎉🎉🎉Today, I am happy to announce a React Paginating component.gif react-paginating demoThere are some popular components which help us to solve pagination problem such as react-paginate, react-pager, … Now there is another one.
  • It’s called react-paginating with a different approach.How “react-paginating” is uses Function as Child Components pattern which allows a component to publish any variables, states or functions to the outside as input params of a function which is going to be used for handling logic and rendering the UI.Here are some…
  • The formula to calculate totalPages:const totalPages = Math.ceil(total / limit);pageCountHow many pages you want to display.I.e:pageCount = 5with pageCount = 5pageCount = 9with pageCount = 9currentPageThe page currently you are visiting.
  • The component calculates and publishes props which allow controlling UI.
  • After that, you might put your CustomAnchor / somewhere on your “storybook” or components manager.DemoConclusionIf you see it is useful for you.

There are some popular components which help us to solve pagination problem such as react-paginate, react-pager, … Now there is another one. It’s called react-paginating with a different approach…

Introducing React Paginating 🎉🎉🎉Today, I am happy to announce a React Paginating component.gif react-paginating demoThere are some popular components which help us to solve pagination problem such as react-paginate, react-pager, … Now there is another one. It’s called react-paginating with a different approach.How “react-paginating” is uses Function as Child Components pattern which allows a component to publish any variables, states or functions to the outside as input params of a function which is going to be used for handling logic and rendering the UI.Here are some differences:Input props.Controlled props.Child callback functions.Flexible UI.Input propsWe minimize the number of props which you pass to “react-paginating” for some several reasons:Make code more readable.Easy to remember the props.Not taking too much time to read a document.Easy to useHere is a list of input props:totalThe total records of your data. Your API should include itI.e:{ “total”: 50, “data”: [ { “id”: 1, “name”: “foo” }, { “id”: 2, “name”: “bar” } ]}limitHow many pages you want to have based on a limit. The formula to calculate totalPages:const totalPages = Math.ceil(total / limit);pageCountHow many pages you want to display.I.e:pageCount = 5with pageCount = 5pageCount = 9with pageCount = 9currentPageThe page currently you are visiting. You can pass it from your “query string” or “state”. You can visit the example here.Controlled propsAfter receiving input props. The component calculates and publishes props which allow controlling UI. Here is a list of public is how it looks like in codesample pagination in useChild callback functionsIf you use paging with state and has…

Introducing React Paginating 🎉🎉🎉 – Dzung Nguyen – Medium