virtual-scroller 1.9.1 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 <!-- `virtual-scroller`: in `.updateItems()` handle a case when `items.length` is the same, in which case find different items and if those items are rendered then maybe update them on screen and update their height, if the items are past rendered then maybe just discard all item heights past rendered, if the items are before rendered then maybe ignore and it will jump on scroll up which is kinda acceptable. -->
 
+1.10.0 / 22.11.2022
+==================
+
+* [React] Applied TypeScript [props fixes](https://gitlab.com/catamphetamine/virtual-scroller/-/merge_requests/1).
+
+* [React] Added two new properties: `item` and [`itemIndex`](https://gitlab.com/catamphetamine/virtual-scroller/-/issues/26). The legacy `children` property is still passed but is considered deprecated.
+
 1.9.0 / 18.05.2022
 ==================
 

package/README.md

@@ -451,7 +451,9 @@ The required properties are:
 
 * `itemComponent` — List item React component.
 
-  * The `itemComponent` will receive a `children` property which is gonna be the item object itself (an element of the `items` array).
+  * The `itemComponent` will receive properties:
+    * `item` — the item object itself (an element of the `items` array).
+    * `itemIndex: number` — the index of the item object in the `items` array.
 
   * For best performance, make sure that `itemComponent` is a `React.memo()` component or a `React.PureComponent`. Otherwise, list items will keep re-rendering themselves as the user scrolls because the containing `<VirtualScroller/>` component gets re-rendered on scroll.
 
@@ -471,7 +473,7 @@ function Messages({ messages }) {
   )
 }
 
-function Message({ children: message }) {
+function Message({ item: message }) {
   const {
     username,
     date,
@@ -503,7 +505,7 @@ Messages.propTypes = {
 }
 
 Message.propTypes = {
-  children: message.isRequired
+  item: message.isRequired
 }
 ```
 
@@ -541,7 +543,7 @@ function ItemComponent({
   state: savedState,
   onStateChange,
   onHeightChange,
-  children: item
+  item
 }) {
   const [state, setState] = useState(savedState)