Безкінечна прокрутка в Inertia v2.2

Команда Laravel випустила версію Inertia v2.2, що включає новий компонент <InfiniteScroll/>. Цей компонент значно спростить створення функції безкінечного скролінгу, якщо ви коли-небудь реалізовували це вручну. Оновлення вводить метод Inertia::scroll(), який безперешкодно працює з повною, простою та курсорною пагінацією Laravel.

Route::get('/users', function () {
    return Inertia::render('Users/Index', [
        'users' => Inertia::scroll(fn () => User::paginate())
    ]);
});

На стороні клієнта вам просто потрібно обгортати ваш контент у компонент безкінечного скролінгу:

import { InfiniteScroll } from '@inertiajs/react'
 
export default function Users({ users }) {
  return (
    <InfiniteScroll data="users">
      {users.data.map(user => (
        <div key={user.id}>
          {user.name}
        </div>
      ))}
    </InfiniteScroll>
  )
}

# Основні можливості

• Проста пагінація за традицією Laravel з компонентами Vue/React/Svelte
• Оновлення URL під час скролінгу для легкого обміну посиланнями
• Скролінг вгору оновлює URL
• Відновлення попередніх сторінок при оновленні
• Двонаправлений скролінг з коробки
• Реверсний режим: скролінг вгору завантажує наступну сторінку, а вниз — попередні
• Налаштовувані та гнучкі параметри
• Ручний режим для повного контролю над завантаженням
• А також багато іншого

# Додаткова інформація

Ви можете почати використовувати цей компонент у новому проекті Laravel starter kit або оновити своє існуюче проект до Inertia v2.2. Ось документація Infinite Scroll, щоб розпочати інтеграцію у вашій програмі.