https://github.com/konradmi/infinite-react-scroll

A simple component for handling veeery long lists in React
https://github.com/konradmi/infinite-react-scroll

infinite-list infinite-scroll typescript

Last synced: 9 days ago
JSON representation

A simple component for handling veeery long lists in React

• Host: GitHub
• URL: https://github.com/konradmi/infinite-react-scroll
• Owner: konradmi
• Created: 2023-12-12T03:48:25.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2023-12-15T14:09:38.000Z (11 months ago)
• Last Synced: 2024-09-17T20:08:28.518Z (2 months ago)
• Topics: infinite-list, infinite-scroll, typescript
• Language: TypeScript
• Homepage:
• Size: 44.9 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# infinite-react-scroll

A simple component for handling veeery long lists in React

It always renders only 2 pages (2 x size) to keep the list performant and loads more pages as you scroll up or down.

## example

You can either run the example or copy the code below to your project.

To run the example:

```

cd examples

yarn install

yarn run dev

```

How to use:

```js

import React, { useRef } from 'react'

import { InfiniteScroll } from 'infinite-react-scroll'

import './App.css'

type Todo = {

  id: number

  todo: string

  completed: boolean

  userId: number

}

const App = () => {

  const container = useRef(null)

  const handleFetchData = async (size: number, offset: number) => {

    const response = await fetch(`https://dummyjson.com/todos?skip=${offset}&limit=${size}`)

    const data = await response.json()

    return data.todos

  }

  const renderElement = (todo: Todo) => {

    return (

      


        

        {todo.todo}

      

    )

  }


  return (

    


      


        Loading...
}

          renderElement={renderElement}

          size={30}

        />

        

    

  )

}


export default App

```