diff --git a/CHANGELOG.md b/CHANGELOG.md index d2c89fa..a2715cc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +# 5.0.0 (04 March 2021) + +## Breaking + +- **viewportRef** is required prop + # 4.0.0 (02 March 2021) ## Breaking diff --git a/README.md b/README.md index fd00418..e78c679 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ # React ViewPort List [![NPM version](https://img.shields.io/npm/v/react-viewport-list.svg?style=flat)](https://www.npmjs.com/package/react-viewport-list) +![typescript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-blue.svg) ![NPM license](https://img.shields.io/npm/l/react-viewport-list.svg?style=flat) [![NPM total downloads](https://img.shields.io/npm/dt/react-viewport-list.svg?style=flat)](https://npmcharts.com/compare/react-viewport-list?minimal=true) [![NPM monthly downloads](https://img.shields.io/npm/dm/react-viewport-list.svg?style=flat)](https://npmcharts.com/compare/react-viewport-list?minimal=true) @@ -9,14 +10,18 @@ \- [React.js documentation](https://reactjs.org/docs/optimizing-performance.html#virtualize-long-lists) -## Virtual List for items with dynamic height/width +## Virtualization for lists with dynamic item size -- Simple API like [`.map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) (no item `ref`/`style` or list `width`/`height` required) -- Dynamic `height`/`width` -- Works perfectly with _Flexbox_ (no `pisition: absolute`) -- Scroll to index -- Vertical and Horizontal lists -- Lightweight (1.7kb minified+gzipped) +React Component that render only items in viewport + +## Features 🔥 +- Simple API like [**.map()**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) +- Created for **dynamic** item `height`/`width` (if you don't know item size) +- Works perfectly with **Flexbox** (unlike other libraries with `pisition: absolute`) +- Supports **scroll to index** +- Supports **initial index** +- Supports **vertical** ↕ and **horizontal** ↔ lists️️ +- Tiny (**<2kb** minified+gzipped) Try 100k list [demo](https://codesandbox.io/s/react-viewport-list-xw2rt) @@ -31,20 +36,29 @@ Try 100k list [demo](https://codesandbox.io/s/react-viewport-list-xw2rt) - ### Basic Usage: ```javascript - import React from 'react'; + import { useRef } from 'react'; import ViewportList from 'react-viewport-list'; - const ItemsList = ({ items }) => ( -
- - {(items) => ( -
- {items.title} -
- )} - -
- ); + const ItemsList = ({ items }) => { + const ref = useRef(null); + + return ( +
+ + {(item) => ( +
+ {item.title} +
+ )} + +
+ ); + }; export default ItemsList; ``` @@ -53,14 +67,14 @@ Try 100k list [demo](https://codesandbox.io/s/react-viewport-list-xw2rt) name |type |default |description ---------------------|----------------------------------------|--------|--------------------------------------------------------------------------------------------------------------------------------- -**viewportRef** |MutableRefObject |null |Viewport `ref` object.
Required for browsers which unsupported `overflow-anchor` css property (like _Safari_) +**viewportRef** |MutableRefObject |required|Viewport `ref` object **items** |Array |[] |Array of items **itemMinSize** |number |required|Item min height (or min width for 'x' **axis**) in px **margin** |number |0 |Item margin bottom (or margin right for 'x' **axis**) in px.
You should still set `margin-bottom` (or `margin-right` for 'x' **axis**) in item styles **overscan** |number |1 |Count of "overscan" items **axis** |'y' / 'x' |'y' |Scroll axis
'y' - vertical, 'x' - horizontal **initialIndex** |number |-1 |Initial index of item in viewport -**initialAlignToTop**|boolean |true |[scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) second argument.
Used with **initialIndex**) +**initialAlignToTop**|boolean / ScrollIntoViewOptions |true |[scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) second argument.
Used with **initialIndex** **children** |(item: any, index: number) => ReactNode |required|Item render function.
Similar to [`.map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) callback ## Methods @@ -69,24 +83,26 @@ name |type |default |descript **Params** - name |type |default|description - --------------|--------------|-------|----------------------------------------------------------------------------------------------- - **index** |number |-1 |Item index for scroll - **alignToTop**|boolean |true |[scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) second argument + name |type |default|description + --------------|-------------------------------|-------|----------------------------------------------------------------------------------------------- + **index** |number |-1 |Item index for scroll + **alignToTop**|boolean / ScrollIntoViewOptions|true |[scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) second argument **Usage** ```javascript - import React, { useRef } from 'react'; + import { useRef } from 'react'; import ViewportList from 'react-viewport-list'; const ItemsList = ({ items }) => { + const ref = useRef(null); const listRef = useRef(null); return ( -
+
( -
- {'Key Items'} - - {(item) => ( -
- {item.title} -
- )} - - {'Items'} - - {(item) => ( -
- {item.title} -
- )} - -
- ); - + const ItemsList = ({ keyItems, items }) => { + const ref = useRef(null); + + return ( +
+ {'Key Items'} + + {(item) => ( +
+ {item.title} +
+ )} + + {'Items'} + + {(item) => ( +
+ {item.title} +
+ )} + +
+ ); + } export default ItemsList; ``` - ### Sorting - You can use _[React Sortable HOC](https://github.com/clauderic/react-sortable-hoc)_ + You can use [React Sortable HOC](https://github.com/clauderic/react-sortable-hoc) ```javascript - import React, { useRef } from 'react'; + import { useRef } from 'react'; import { SortableContainer, SortableElement } from 'react-sortable-hoc'; import ViewportList from 'react-viewport-list'; - const SortableItem = SortableElement((props) =>
); + const SortableList = SortableContainer( + ({ innerRef, ...rest }) =>
+ ); - const SortableList = SortableContainer((props) =>
); + const SortableItem = SortableElement((props) =>
); - const ItemsList = ({ items, onSortEnd }) => ( - - - {(item, index) => ( - - {item.title} - - )} - - - ); + const ItemsList = ({ items, onSortEnd }) => { + const ref = useRef(null); + + return ( + + + {(item, index) => ( + + {item.title} + + )} + + + ); + } export default ItemsList; ``` diff --git a/package-lock.json b/package-lock.json index ed2721a..a271796 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-viewport-list", - "version": "4.0.5", + "version": "5.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index f8166b3..b26f546 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,15 @@ { "name": "react-viewport-list", - "version": "4.0.5", - "description": "Virtual List for items with dynamic height/width", + "version": "5.0.0", + "description": "Virtualization for lists with dynamic item size", "keywords": [ "react", + "viewport", + "list", + "windowing", + "window", "virualization", + "virtual", "react-window", "react-virualized", "react-tiny-virtual-list", diff --git a/tsconfig.json b/tsconfig.json index 5101e36..1f987dc 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -11,8 +11,8 @@ // "checkJs": true, /* Report errors in .js files. */ "jsx": "react-jsx", /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */ "declaration": true, /* Generates corresponding '.d.ts' file. */ - "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ - "sourceMap": true, /* Generates corresponding '.map' file. */ + // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ + // "sourceMap": true, /* Generates corresponding '.map' file. */ // "outFile": "./", /* Concatenate and emit output to single file. */ "outDir": "./lib", /* Redirect output structure to the directory. */ // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */