Skip to content

Commit 94652ab

Browse files
developerdizzledeveloperdizzle
authored
Merge pull request #41 from vinnymac/map-virtual-to-props
map virtual object to props
2 parents 487d78b + 39653e9 commit 94652ab

13 files changed

+274
-71
lines changed

‎README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,17 @@ Name | Type | Default | Description
9898
`itemHeight` | Number | - | Height in pixels of a single item. **You must have a CSS rule that sets the height of each list item to this value.**
9999
`itemBuffer` | Number | 0 | Number of items that should be rendered before and after the visible viewport. Try using this if you have a complex list that suffers from a bit of lag when scrolling.
100100

101+
#### Mapping
102+
103+
`VirtualList` allows a second, optional, parameter, named `mapVirtualToProps`, which functions similarly to [Redux's `mapStateToProps`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options). This function can be provided to change the properties passed to `MyList`. Its arguments are:
104+
105+
Name | Description
106+
--- | ---
107+
`props` | Includes all properties passed to `MyVirtualList`
108+
`state` | Includes `firstItemIndex` and `lastItemIndex`; array indexes of the visible bounds of `items`
109+
110+
The default `mapVirtualToProps` can be found [here](/src/utils/defaultMapVirtualToProps.js).
111+
101112
#### Example Usage
102113

103114
Check out [demo/src/app.js](demo/src/app.js) and [demo/src/ConfigurableExample.js](demo/src/ConfigurableExample.js) for the example used in the [demo](http://developerdizzle.github.io/react-virtual-list).

‎demo/dist/app.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/dist/index.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
5+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" />
6+
<style>
7+
h1, h2 {
8+
font-weight: bold;
9+
}
10+
11+
body {
12+
padding-bottom: 20em;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<header class="jumbotron">
18+
<h1 class="container">React Virtual List</h1>
19+
</header>
20+
<main>
21+
<section class="container" id="app">
22+
</section>
23+
</main>
24+
25+
<script src="react.js"></script>
26+
<script src="virtualList.js"></script>
27+
<script src="app.js"></script>
28+
29+
<a href="https://github.com/developerdizzle/react-virtual-list"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
30+
</body>
31+
</html>

‎demo/dist/react.js

Lines changed: 24 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/dist/virtualList.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)