https://github.com/jedirandy/aperture

:camera: A virtual scrolling container
https://github.com/jedirandy/aperture

Last synced: 13 days ago
JSON representation

:camera: A virtual scrolling container

• Host: GitHub
• URL: https://github.com/jedirandy/aperture
• Owner: jedirandy
• License: mit
• Created: 2016-04-03T22:01:09.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2016-05-30T16:09:51.000Z (about 9 years ago)
• Last Synced: 2025-05-09T02:13:50.927Z (about 2 months ago)
• Language: JavaScript
• Size: 21.5 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Aperture

[![Build Status](https://travis-ci.org/jedirandy/aperture.svg?branch=master)](https://travis-ci.org/jedirandy/aperture)

[![Dependency Status](https://www.versioneye.com/user/projects/57082104fcd19a00415b0fff/badge.svg?style=flat)](https://www.versioneye.com/user/projects/57082104fcd19a00415b0fff)

[![npm module](https://badge.fury.io/js/aperturejs.svg)](https://www.npmjs.org/package/aperturejs)

:camera: A JavaScript library providing a virtual scrolling container, allows (very large) datasets to be displayed with high performance and memory efficiency.

What it provides:

* A scrollable container that renders only visible items

* a flexible configuration making it works with different structures such as lists or tables

What it doesn't provide:

* how items are rendered, how layout looks like, it's in your hands

## Install

```

npm install aperturejs

```

## Example

* constructs a list of divs:

```js

var aperture = new Aperture({

    items: items, // array of dataset

    onRender: (container, item, index, relativeIndex) => {

        let div = document.createElement('div');

        div.setAttribute('id', 'n-' + relativeIndex);

        div.innerHTML = item;

        container.appendChild(container);

    },

    onRerender: (container, item, index, relativeIndex) => {

        let div = document.getElementById('n-' + relativeIndex);

        div.innerHTML = item;

    },

    onOverflow: (container, relativeIndex) => {

        // this is necessary when the scroller reaches the end

        // the very last items may become placeholders

        div.innerHTML = '';

    }

});

aperture.renderTo(aDomElement);

```

## License

MIT