react-virtuoso - npm Package Compare versions

Comparing version 0.8.0 to 0.8.1

dist/grid.8a8e13d5.js

@@ -220,3 +220,3 @@ // modules are defined as an array
   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-  var ws = new WebSocket(protocol + '://' + hostname + ':' + "49764" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "56314" + '/');
 
@@ -223,0 +223,0 @@ ws.onmessage = function (event) {

package.json

 {
   "name": "react-virtuoso",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "homepage": "https://virtuoso.dev",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -5,11 +5,13 @@ <img src="https://user-images.githubusercontent.com/13347/57673110-85aab180-7623-11e9-97b4-27bbdcf8cf40.png" width="292">
 
-**React Virtuoso** is a simple, easy to use React component made to render huge data lists. Out of the box, Virtuoso:
+**React Virtuoso** is a simple, easy to use React virtualized list component that can render huge data sets.
+Out of the box, Virtuoso:
 
-- Handles variable sized items; no manual measurements or hard-coding of item heights;
-- Supports grouping with sticky group headers;
+- Handles items with **variable dynamic height**; no manual measurements or hard-coding of item heights necessary;
+- Supports **grouping with sticky group headers** (`GroupedVirtuoso`);
+- Supports **responsive grid layout** (`VirtuosoGrid`);
 - Automatically handles content resizing;
 - Can render footer at the end of the list;
-- Can pin the first `N` items to the top of the list.
+- Can **pin the first `N` items** to the top of the list.
 
-To see live examples, check the [website](//virtuoso.dev).
+For live examples and documentation, check the [website](//virtuoso.dev).
 
@@ -46,26 +48,40 @@ ## Get Started
 
-### Footer
+### Grouping
 
-The component accepts an optional `footer` [render property](https://reactjs.org/docs/render-props.html), rendered at the bottom of the list.
-The footer can be used to host a "load more" button or an indicator that the user has reached the end of the list.
+The `GroupedVirtuoso` component is similar to the "flat" `Virtuoso`, with the following differences:
 
-Check the [footer](//virtuoso.dev/footer), [load more](//virtuoso.dev/press-to-load-more) and [endless scrolling](//virtuoso.dev/endless-scrolling) examples for practical applications of the footer.
+- Instead of `totalCount`, the component accepts `groupedCounts: number[]`, which specifies the amount of items in each group.
+  For example, passing `[20, 30]` will render two groups with 20 and 30 items each;
+- In addition the `item` render prop, the component requires an additional `group` render prop,
+  which renders the **group header**. The `group` callback receives the zero-based group index as a parameter;
+- The `item` render prop gets called with an additional second parameter, `groupIndex: number`.
 
-### Pinned Items
+Check the
+[grouped numbers](https://virtuoso.dev/grouped-numbers),
+[grouped by first letter](https://virtuoso.dev/grouped-by-first-letter) and
+[groups with load on demand](https://virtuoso.dev/grouped-with-load-on-demand)
+examples.
 
-The component accepts an optional `topItems` property, that specifies how many of the items to keep "pinned" at the top of the list.
+### Grid
 
-Check the [fixed top items](//virtuoso.dev/top-items) example for a live version of the above.
+The `VirtuosoGrid` component displays **same sized items** in multiple columns.
+The layout and item sizing is controlled through CSS class properties, which allows you to use media queries, min-width, percentage, etc.
 
-### Grouping
+Check the [responsive grid columns](https://virtuoso.dev/grid-responsive-columns) example for a sample implementation.
 
-The package exports two components - `Virtuoso` and `GroupedVirtuoso`.
-The Grouped component supports rendering sticky group headers at the beginning of each group.
+### Footer
 
-Check the
-[grouped numbers](//virtuoso.dev/grouped-numbers),
-[grouped by first letter](//virtuoso.dev/grouped-by-first-letter) and
-[groups with load on demand](//virtuoso.dev/grouped-with-load-on-demand)
-examples for working examples.
+The component accepts an optional
+`footer` [render property](https://reactjs.org/docs/render-props.html),
+which is rendered after all items.
+The footer can be used to host a "load more" button
+or an indicator that the user has reached the end of the list.
 
+Check the [footer](https://virtuoso.dev/footer), [press load more](https://virtuoso.dev/press-to-load-more) and [endless scrolling](https://virtuoso.dev/endless-scrolling) examples for practical applications of the footer.
+
+### Pinned Items
+
+The component accepts an optional `topItems` property, that specifies
+how many of the items to keep "pinned" at the top of the list. Check the [top items](https://virtuoso.dev/top-items) example.
+
 ## Documentation and Demos
@@ -72,0 +88,0 @@

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

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

Improved metrics

Total package byte prevSize

14300666

increased by128.04%

Number of package files

45

increased by4.65%

Number of lines in readme file

96

increased by20%

Worsened metrics

Lines of code

31273

decreased by-41.92%

No dependency changes