Socket
Book a DemoInstallSign in
Socket

@dreamworld/dw-lazy-list

Package Overview
Dependencies
Maintainers
4
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@dreamworld/dw-lazy-list

An element to load list lazily

latest
Source
npmnpm
Version
1.0.0-init.2
Version published
Maintainers
4
Created
Source

dw-lazy-list

An element which is used to load list row's data lazily. Data can be load in continuous or nonContinuous way.

Installation

  npm install @dreamworld/dw-lazy-list

Usage

  @import '@dreamworld/dw-lazy-list/dw-lazy-list';

Demo

Features

  • Sets active property on light dom when it becomes visible in the viewport
    • setting of the active property depends on the nonContinuous, initialItemsCount, prerenderItemsCount and prerenderItemsPercentages property.
  • Can work in 2 direction. Horizontal and Vertical
  • Set prerenderItemsPercentages or prerenderItemsCount to pre set active property on light dom before it's visible to viewport
    • prerenderItemsCount will not work for nonContinuous list

How it works

  • It selets all light element using slot
  • It listen on owned scroll event and window resize event to refresh list.
  • It marks active flag on light element which is available in visible viewport area.
  • It provides refresh method to refresh list. Integration element must use this method in following cases:
    • New item is added to list
    • Existing item is removed
    • Order is changed
    • Item's height is changed.

Methods

  • refresh
  • scrollToBottom
  • canScrollTop
  • canScrollBottom
  • scrollToIndex

Examples

  <lazy-list initialItemsCount=20>
    <child-el></child-el>
    <child-el></child-el>
  </lazy-list>

Keywords

lit

FAQs

Package last updated on 24 Apr 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts