react-virtual-list - npm Package Compare versions

Comparing version 1.8.0 to 2.0.0

LICENSE.md

 The MIT License (MIT)
 
-Copyright (c) 2015 Dizzle
+Copyright (c) 2017 Dizzle
 
@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy

package.json

 {
   "name": "react-virtual-list",
-  "version": "1.8.0",
-  "description": "Super simple virtualized list React component",
+  "version": "2.0.0",
+  "description": "Super simple virtualized list React higher-order component",
   "main": "dist/VirtualList.js",
@@ -10,4 +10,6 @@ "directories": {
   "scripts": {
-    "build": "gulp default",
-    "test": "jasmine-node test --verbose --matchall"
+    "build": "babel src --out-dir lib --copy-files --ignore tests",
+    "build:demo": "webpack --config demo/webpack.config.babel.js",
+    "stats": "webpack .\\demo\\src\\app.js --config .\\demo\\webpack.config.babel.js --profile --json > stats.json",
+    "test": "jest --verbose"
   },
@@ -23,3 +25,4 @@ "repository": {
     "render",
-    "scroll"
+    "scroll",
+    "performance"
   ],
@@ -31,10 +34,25 @@ "author": "developerdizzle",
   "homepage": "https://github.com/developerdizzle/react-virtual-list",
-  "dependencies": {
-    "react": "~0.13.x"
-  },
+  "dependencies": {},
   "devDependencies": {
+    "babel-cli": "^6.18.0",
+    "babel-core": "^6.18.2",
+    "babel-jest": "^17.0.2",
+    "babel-loader": "^6.2.8",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-stage-0": "^6.16.0",
+    "file-loader": "^0.9.0",
     "gulp": "^3.8.11",
     "gulp-react": "^3.0.1",
-    "jasmine-node": "^1.14.5"
+    "jasmine-node": "^1.14.5",
+    "jest": "^17.0.3",
+    "react": "^15.0.0",
+    "react-addons-test-utils": "^15.4.2",
+    "react-dom": "^15.0.0",
+    "webpack": "^1.13.3"
+  },
+  "peerDependencies": {
+    "react": "^15.0.0",
+    "react-dom": "^15.0.0"
   }
 }

README.md

 # [react-virtual-list](http://developerdizzle.github.io/react-virtual-list/) [![Build Status](https://travis-ci.org/developerdizzle/react-virtual-list.svg?branch=master)](https://travis-ci.org/developerdizzle/react-virtual-list)
 
-Super simple virtualized list [React](https://github.com/facebook/react) component
+Super simple virtualized list [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html) for [React](https://github.com/facebook/react) version `^15.0.0`.
 
 [Check out the demo here](http://developerdizzle.github.io/react-virtual-list)
 
-This React component allows you to display a large list of fixed-height items in your document, while only rendering the items visible in the viewport.  This allows a large list to be rendered with much fewer DOM elements.
+`react-virtual-list` allows you to display a large list of fixed-height items, while only rendering the items visible on the screen.  This allows a large list to be rendered with much fewer DOM elements.
 
+### Some other benefits:
+* Zero dependencies
+* Small - `~4.2k` gzipped & minified, `~4.9k` minified [http://i.imgur.com/DxRCuLv.png](http://i.imgur.com/DxRCuLv.png)
+* Decent performance - demo page almost always stays over 60fps [http://i.imgur.com/CHVCK9x.png](http://i.imgur.com/CHVCK9x.png)
+* Keeps your components separate - as a higher-order component
+* Gives you control - doesn't force any particular markup, but gives you the necessary styles and data to use.
+
+## Legacy
+
+If you're looking for documentation on version 1, supporting React `~0.13.x`, it's [here](README.v1.md).
+
 ## Installation
 
-You can use NPM to install react-virtual-list:
+You can use [npm](https://npmjs.org) to install [react-virtual-list](https://www.npmjs.com/package/react-virtual-list).
 
 ```console
-$ npm install react-virtual-list --save
+> npm install react-virtual-list --save
 ```
@@ -19,41 +30,74 @@
 
-The `./dist/VirtualList.js` module exports a single React component.
+The `./lib/VirtualList.js` module exports a single, ES5-compatible, CommonJS-accessible, component factory.
 
+```js
+import VirtualList from 'react-virtual-list';
 ```
-var VirtualList = require('react-virtual-list');
+
+Your inner list component uses the `virtual` property to render the visible items, and set a style to set the overall list height and padding.
+
+```js
+const MyList = ({
+  virtual,
+  itemHeight,
+}) => (
+  <ul style={virtual.style}>
+    {virtual.items.map(item => (
+      <li key={`item_${item.id}`} style={{height: itemHeight}}>
+        Lorem ipsum dolor sit amet
+      </li>
+    ))}
+  </ul>
+);
 ```
 
-#### JSX
+**Note:** You should set [keys](https://facebook.github.io/react/docs/lists-and-keys.html) on your list items.
 
+Create the virtualized component.
+
+```js
+const MyVirtualList = VirtualList()(MyList);
 ```
-<VirtualList items={this.props.items} renderItem={this.renderItem} itemHeight={this.props.itemHeight} />
+
+Write the JSX for the virtualized component with the necessary [properties](#properties).
+
+```js
+<MyVirtualList
+  items={myBigListOfItems}
+  itemHeight={100}
+/>
 ```
 
+#### Options
+
+Options are used before the virtualized component can be created.  This means that if you need to change an option after the initial render, you will need to recreate the virtualized component.
+
+```js
+const options = {
+  container: this.refs.container
+};
+
+const MyVirtualList = VirtualList(options)(MyList);
+```
+
+Name | Type | Default | Description
+--- | --- | --- | ---
+`container` | DOM Element | window | Scrollable element that contains the list.  Use this if you have a list inside an element with `overflow: scroll`.
+
 #### Properties
 
-* `items` the full array of list items.  Only the visible subset of these will be rendered.
-* `renderItem` a function to render a single item, passed as argument `item`.  Must return a single React element (`React.createElement(...)`)
-* `itemHeight` the height in pixels of a single item.  **You must have a CSS rule that sets the height of each list item to this value.**
-* `container` the scrollable element that contains the list.  Defaults to `window`.  Use this if you have a list inside an element with `overflow: scroll`.
-* `tagName` the tagName for the root element that surrounds the items rendered by renderItem.  Defaults to `div`.  Use this if you want to render a list with `ul` and `li`, or any other elements.
-* `scrollDelay` the delay in milliseconds after scroll to recalculate.  Defaults to `0`.  Can be used to throttle recalculation.
-* `itemBuffer` the number of items that should be rendered before and after the visible viewport.  Defaults to `0`.
- 
-Any other properties set on `VirtualList`, such as `className`, will be reflected on the component's root element.
+These properties and any others set on your virtual component, such as `className`, will be passed down to the inner component.
 
-#### Functions
+Name | Type | Default | Description
+--- | --- | --- | ---
+`items` | Array | - | Full array of list items.  Only the visible subset of these will be rendered.
+`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.**
+`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.
 
-* `visibleItems` the currently visible array of items.  Can be used to figure out which items are in the viewport.  Eg: `var items = this.refs.list.visibleItems()` 
-
 #### Example Usage
 
-Check out [https://github.com/developerdizzle/react-virtual-list/blob/gh-pages/App.jsx](https://github.com/developerdizzle/react-virtual-list/blob/gh-pages/App.jsx) for the example used in the demo.
+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).
 
 ## Tests
 
-Use `npm test` to run the tests using [jasmine-node](https://github.com/mhevery/jasmine-node).  Currently only the math calculations are tested.  Hoping to add some DOM tests as well.
-
-## To Do
-
-* ES6/2015
-* [Known issue with mobile scroll event](https://github.com/developerdizzle/react-virtual-list/issues/1)
+Use `npm test` to run the tests using [Jest](https://github.com/facebook/jest).  Not everything is currently tested yet!

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

103

increased by77.59%

Worsened metrics

Total package byte prevSize

46136

decreased by-45.47%

Dependency count

2

increased by100%

Dev dependency count

16

increased by433.33%

Number of package files

25

decreased by-3.85%

Lines of code

823

decreased by-0.48%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedasap@2.0.6(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedcreate-react-class@15.7.0(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@15.7.0(transitive)

• + Addedreact-dom@15.7.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedua-parser-js@0.7.40(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)

• - Removedreact@~0.13.x

• - Removedacorn@5.7.4(transitive)

• - Removedamdefine@1.0.1(transitive)

• - Removedast-types@0.9.6(transitive)

• - Removedbalanced-match@1.0.2(transitive)

• - Removedbase62@1.2.8(transitive)

• - Removedbrace-expansion@1.1.11(transitive)

• - Removedcommander@2.20.3(transitive)

• - Removedcommoner@0.10.8(transitive)

• - Removedconcat-map@0.0.1(transitive)

• - Removeddefined@1.0.1(transitive)

• - Removeddetective@4.7.1(transitive)

• - Removedenvify@3.4.1(transitive)

• - Removedesprima@3.1.3(transitive)

• - Removedesprima-fb@15001.1.0-dev-harmony-fb(transitive)

• - Removedglob@5.0.15(transitive)

• - Removedgraceful-fs@4.2.11(transitive)

• - Removediconv-lite@0.4.24(transitive)

• - Removedinflight@1.0.6(transitive)

• - Removedinherits@2.0.4(transitive)

• - Removedjstransform@11.0.3(transitive)

• - Removedminimatch@3.1.2(transitive)

• - Removedminimist@1.2.8(transitive)

• - Removedmkdirp@0.5.6(transitive)

• - Removedobject-assign@2.1.1(transitive)

• - Removedonce@1.4.0(transitive)

• - Removedpath-is-absolute@1.0.1(transitive)

• - Removedprivate@0.1.8(transitive)

• - Removedq@1.5.1(transitive)

• - Removedreact@0.13.3(transitive)

• - Removedrecast@0.11.23(transitive)

• - Removedsource-map@0.4.40.5.7(transitive)

• - Removedthrough@2.3.8(transitive)

• - Removedwrappy@1.0.2(transitive)