How to Implementation

Step 1

Import hyperapp-infinite-list.

Node.js


import { createState, createActions, createList } from 'hyperapp-infinite-list';
        

Browser

Add script tag on html.


<script src="https://unpkg.com/hyperapp-infinite-list"></script>
        

You can find the library in window.hyperappInfiniteList.


const { createState, createActions, createList } = hyperappInfiniteList;
        

Step 2

Add the state and actions for hyperapp-infinite-list.


const state = {
  $list1: createState()
};

const actions = {
  $list1: createActions()
};
        

Namespace in state and actions must be same name.

Step 3

Create inifinite list component.


const List = createList(
  ({ id, name }) => (
    <div key={id} style={{
      width: '100%',
      padding: '10px',
      textAlign: 'center',
      borderTop: (id === 1) ? 'none' : 'solid 1px #222'
    }}>
      <div>id: {id}</div>
      <div>name: {name}</div>
    </div>
  )
);
        

Argument of createList is Hyperapp component.

The component specified here will be rendered as each item of the infinite list.

For each item you need to set the (unique) key prop.


Lazy components can also be used here.


const List = createList(
  ({ id, name }) => (state, actions) => (
     .
     .
     .
  )
);
        

Step 4

Add the infinite list component created in step 3 to the view.


const view = (state, actions) => (
  <div>
    <h1>Hyperapp InfiniteList basic example</h1>
    <div style={{
      height: '480px',
      border: 'solid 1px #222'
    }}>
      <List namespace="$list1" itemHeight={80} />
    </div>
  </div>
);
        

The infinite list must be wrapped with a parent element that explicitly specifies a height.

The following props are required for the infinite list.

Step 5

Set items to the inifinite list component.


const main = app(state, actions, view, document.getElementById('list'));
const items = [];
for (let i = 1; i <= 1000; i++) {
  items.push({ id: i, name: `foo ${i}` });
}
main.$list1.setItems(items);
        

Call setItems action of the infinite list namespace with an array of items.


There is also a way to set items in the onCreated event of the infinite list.


const view = (state, actions) => (
  <div>
    <h1>Hyperapp InfiniteList basic example</h1>
    <div style={{
      height: '480px',
      border: 'solid 1px #222'
    }}>
      <List
        namespace="$list1"
        itemHeight={80}
        onCreated={() => {
          const items = [];
          for (let i = 1; i <= 1000; i++) {
            items.push({ id: i, name: `foo ${i}` }); 
          }
          actions.$list1.setItems(items);
        }}
      />
    </div>
  </div>
);
app(state, actions, view, document.getElementById('list'));