@vkma/infscroll

Модуль, позволяющий создать бесконечный скролл*.

Установка

$ yarn add @vkma/infscroll или $ npm i @vkma/infscroll

Пример использования

import {InfScroll} from '@vkma/infscroll'

const App = () => {
  const [data,setData] = React.useState([])
	const [showLoader, setShowLoader] = React.useState(true)

	const changeData = () => {
		return new Promise(response=>{
			fetch(`https://ban.su/offset?offset=${data.length}&count=20`)
			.then(e=>e.json())
			.then(res=>{
				setData(e=>[...e,...res])
				response(true)
			})
			.catch(()=>{
				setShowLoader(false)
			})
		})
	}

	return <InfScroll onReachEnd={changeData} showLoader={showLoader}>
		{data.map((e,i)=><Card key={i} i={e}/>)}
	</InfScroll>
}

export default App;

Параметры

loader {any} - визуальный элемент подгрузки, располагающийся внизу.

showLoader {boolean} - переключатель визуального отображения элемента loader внизу.

onReachEnd {()=>Promise<unknown>} - Promise функция, при достижении конца. Promise обязателен, во избежание дублирования данных.

triggerSize {string} - зона срабатывания функции, по умолчанию 50px до низа.

adaptive {string} - селектор, отностельно которого должен уместиться InfScroll. Если вы используете VKUI, то рекомендуемым значением будет adaptive='.Panel__in'.