Hyperapp InfiniteList
Infinite scroll list component for Hyperapp.
Feature
- Lightweight: The minified script size is 3kB.
- Memory friendly: Render only the area where items are displayed.
Limitation
- Each item in the list must be the same height.
- Only single column list is supported.
Instllation
npm install --save hyperapp-infinite-list
or
yarn add hyperapp-infinite-list
Examples with tutorial
Infinite list component props
namespace
required
string
Specify the namespace stored by createState
and createActions
.
const state = $list1: ; const actions = $list1: ; const List = ; const view = { <div> <List namespace="$list1" ... /> </div>};
itemHeight
required
numeric
Specify the height of each item to be rendered (px).
// good: numeric (as 100px)<List itemHeight=100 ... /> // good: numeric string (as 100px)<List itemHeight="100" ... /> // bad: is not numeric<List itemHeight="100px" ... /> // bad: < 0<List itemHeight=-100 ... />
preloadItemCount
optional
(default:10
)integer
Specify the number of items to preload in above and below the out of the inifinite list display area.
// good: integer<List preloadItemCount=5 ... /> // good: integer string<List itemHeight="5" ... /> // bad: is not integer<List itemHeight=55 ... /> // bad: < 0<List itemHeight=-5 ... />
onReachTop
optional
(default:empty function
)function
Specify the function to be called when scrolling to the top of the infinite list.
<List onReachTop= { ... } ... />
onReachBottom
optional
(default:empty function
)function
Specify the function to be called when scrolling to the bottom of the infinite list.
<List onReachBottom= { ... } ... />
onCreate
optional
(default:empty function
)function
Specify the function to be called when the inifinite list created.
<List onCreate= { ... } ... />
onUpdate
optional
(default:empty function
)function
Specify the function to be called when the inifinite list updated.
<List onUpdate= { ... } ... />
Tips
Multiple infinite list in the single view
const state = $list1: $list2: ; const actions = $list1: $list2: ; const List1 = ;const List2 = ; const view = { <div> <List1 namespace="$list1" ... /> <List2 namespace="$list2" ... /> </div>};
Custom state
You can extend the infinite list state by passing custom state as an argument when calling createState()
.
const state = // inject the 'selected' state to $list1 namespace $list1: ; // access the 'selected' state in $list1const view = <div> <p>selected: state$list1selected</p> <div> <List ... /> </div> </div>;
Custom actions
You can extend the infinite list actions by passing custom actions as an argument when calling createActions()
.
const state = // inject 'selected' state to $list1 namespace $list1: ; const actions = // inject the 'selectItem' action to $list1 namespace $list1: ; // call the 'selectItem' action in $list1const List = ; // access the 'selected' state in $list1const view = <div> <p>selected: state$list1selected</p> <div> <List ... /> </div> </div>;
Manage items example
// set custom actionsconst actions = $list1: ;; // call custom actions in viewconst view = <div> <a href="#" onclick= actions$list1>add</a> <a href="#" onclick= actions$list1>remove</a> <a href="#" onclick= actions$list1>update</a> <a href="#" onclick= actions$list1>clear</a> </div>;
How to use from TypeScript
see here.
License
© 2018 ktty1220