Posts

Showing posts with the label infinite

Useful ‘Infinite Scroll’ React Components & JS Plugins Collection

Image
  A list of React components and JS plugins to add infinite scrolling functionality to your projects. Photo by  Reuben  on  Unsplash When browsing blogs or the news, it’s common to find the infinite scroll function, which is seamless, and no need to refresh the page for more content. The better the user experience, the more customers you end up catching. There are several React components that can be applied when building your projects. egjs/react-infinitegrid egjs-infinitegrid/packages/react-infinitegrid at master · naver/egjs-infinitegrid A module used to arrange card elements including content infinitely on a grid layout. … github.com It’s a React component that can arrange items infinitely according to the type of grids. More demos can be found here: Storybook Edit description naver.github.io Documentation: Installation | InfiniteGrid Using the package managers (recommended) naver.github.io Features: Fully written in TypeScript. Comes with a rich API. Inserts inf...

Infinite scroll blogs with Javascript

Image
  course from Brad Traversy Github code Features: posts fetch from JSONPlaceholder API custom three dots loader filter posts based on keywords HTML filter to type in the keywords  the post container will load the posts fetched from API the loader is a three-dots animation CSS fixed position of the three dots animates the y axis and the opacity JS get the DOMs needed Using the JSONPlaceholder API to get the posts data, set the limit number of posts and the page now After fetching all the data, it's time to show all the data in the DOM.   showing the post id, title, and body When scrolling the page, show the loader if the height of scrolled longer than the whole scrollheight. How to teel the difference of scrollHeight,clientHeight,offsetHeight? scrollHeight :  ENTIRE content & padding (visible or not) Height of all content + paddings, despite of height of the element. clientHeight :  VISIBLE content & padding Only visible height: content portion lim...