Фото Jaël Vallée на Unsplash
Привет 👋,
На прошлой неделе я написал статью о создании бесконечного списка загрузки с React и GraphQL. Я выяснил, что можно было написать абстракцию для этого конкретного случая.
Я представляю вас React-Simple-Infinite-loading Отказ Он отображает элементы списка, которые загружают, как пользователь прокручивает список.
Вот пример кода. Вы можете найти более конкретный пример в Репозиторий моего Предыдущая статья Использование сервера GraphQL.
import React from 'react'
import InfiniteLoadingList from 'react-simple-infinite-loading'
function Example ({ items, fetchMore, hasMore }) {
return (
{({ item, style }) => (
{item}
)}
)
}
Он использует три библиотеки от Брайан Вон :
- React-window сделано для демонстрации эффективных больших списков. Он создает только компоненты для видимых элементов и узлов повторного использования.
- React-Window-Infinite-погрузчик это HOC, которая загружает элементы, когда пользователь прокручивает список
- React-Virualized-Auto-Sizer Помогает вам отобразить свой список, чтобы он соответствует пространству, доступным в его родительском контейнере.
Если вам интересно, не стесняйтесь, чтобы попробовать!
Репозиторий: https://github.com/frinyvonnick/react-simple-infinite-loading
Обратная связь и вклад ценится 🙏 Пожалуйста, твитги мне, если у вас есть какие-либо вопросы @YVONNICKFRIN Действительно
Надеюсь, это поможет!
Оригинал: “https://dev.to/yvonnickfrin/infinite-loading-list-component-in-react-431o”