react-base-virtual-list 0.0.1-beta.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +150 -0
- package/dist/assets/index-SQS0B2sm.js +2038 -0
- package/dist/assets/index-m64ugveS.css +1 -0
- package/dist/index.html +14 -0
- package/package.json +58 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2017 phphe
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
# react-base-virtual-list    
|
|
2
|
+
|
|
3
|
+
[中文](README_CN.md)
|
|
4
|
+
|
|
5
|
+
React basic virtual list, supports common features and is easy to customize. [Online Demo](https://phphe.github.io/react-base-virtual-list/)
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- Supports common features and is easy to customize. Check [Development](#development).
|
|
10
|
+
- Supports lists with fixed height or dynamic height items.
|
|
11
|
+
- High performance. For lists with different item heights, it does not retrieve the height of each item.
|
|
12
|
+
- Formats of exported files: typescript, cjs, esm, iife, iife source map. iife can be use by `script` tag in browser, see [IIFE](#iife).
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
- npm: `npm install react-base-virtual-list`
|
|
17
|
+
- yarn: `yarn add react-base-virtual-list`
|
|
18
|
+
- pnpm: `pnpm add react-base-virtual-list`
|
|
19
|
+
- CDN: Check [iife](#iife).
|
|
20
|
+
|
|
21
|
+
## Usage
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import { VirtualList } from "react-base-virtual-list";
|
|
25
|
+
|
|
26
|
+
export default function BaseExample() {
|
|
27
|
+
const exampleData = [
|
|
28
|
+
{
|
|
29
|
+
headline: "in magna bibendum imperdiet",
|
|
30
|
+
content: "Praesent blandit. Nam nulla.",
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
headline: "non velit donec diam",
|
|
34
|
+
content: "Aenean fermentum.",
|
|
35
|
+
},
|
|
36
|
+
];
|
|
37
|
+
return (
|
|
38
|
+
<>
|
|
39
|
+
<VirtualList
|
|
40
|
+
items={exampleData}
|
|
41
|
+
style={{ height: "600px", border: "1px solid #ccc", padding: "10px" }}
|
|
42
|
+
renderItem={(item, index) => (
|
|
43
|
+
<div key={index} style={{ marginBottom: "10px" }}>
|
|
44
|
+
<h3>
|
|
45
|
+
{index}. {item.headline}
|
|
46
|
+
</h3>
|
|
47
|
+
<div>
|
|
48
|
+
<div
|
|
49
|
+
style={{
|
|
50
|
+
float: "left",
|
|
51
|
+
width: "100px",
|
|
52
|
+
height: "100px",
|
|
53
|
+
background: "#f0f0f0",
|
|
54
|
+
borderRadius: "5px",
|
|
55
|
+
marginRight: "10px",
|
|
56
|
+
}}
|
|
57
|
+
></div>
|
|
58
|
+
{item.content}
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
)}
|
|
62
|
+
></VirtualList>
|
|
63
|
+
</>
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## props (required)
|
|
69
|
+
|
|
70
|
+
- `items`: `Array`. List data.
|
|
71
|
+
- `renderItem`: `(item, index: number) => ReactNode`. Rendering function for each item in the list. Index is the index of the list item in the whole list.
|
|
72
|
+
|
|
73
|
+
## props (optional)
|
|
74
|
+
|
|
75
|
+
- `itemSize`: `number`. Estimated height of a single item in the list.
|
|
76
|
+
- `buffer`: `number`. Additional space outside the visible area of the virtual list to render.
|
|
77
|
+
- `persistentIndices`: `number[]`. Array of indices of items to be persistently rendered. This keeps the corresponding items rendered continuously without being removed due to being outside the rendering area. You can make them sticky by using CSS `position:sticky`.
|
|
78
|
+
- `listSize`: `number`, default: 1000. Height of the visible area of the list. Only used before DOM creation, suitable for SSR.
|
|
79
|
+
- `triggerDistance`: `number`. The min distance to trigger re-rendering when scrolling.
|
|
80
|
+
- `onScroll`: `React.UIEventHandler`. Listen for the list's scroll event. Type is same with HTML native onscroll handle.
|
|
81
|
+
- `virtual`: `boolean`. default: `true`. Whether to enable the virtual list feature. Render all items if disabled.
|
|
82
|
+
- `renderHead`: `() => ReactNode`. Customize the persistent rendering content of the list header. Suitable for absolutely positioned, fixed positioned elements, and elements that do not take up too much space.
|
|
83
|
+
- `renderFoot`: `() => ReactNode`. Customize the persistent rendering content of the list footer. Suitable for absolutely positioned, fixed positioned elements, and elements that do not take up too much space.
|
|
84
|
+
- `className`: `string`. Add a CSS class to the list root element.
|
|
85
|
+
- `style`: `React.CSSProperties`. Add CSS styles to the list root element.
|
|
86
|
+
|
|
87
|
+
## Exposed Methods
|
|
88
|
+
|
|
89
|
+
First, use `ref` to obtain the exposed object.
|
|
90
|
+
|
|
91
|
+
```tsx
|
|
92
|
+
import { useRef } from "react";
|
|
93
|
+
import { VirtualList, VirtualListHandle } from "react-base-virtual-list";
|
|
94
|
+
|
|
95
|
+
export default function BaseExample() {
|
|
96
|
+
const ref = useRef<VirtualListHandle>(null);
|
|
97
|
+
return (
|
|
98
|
+
<>
|
|
99
|
+
<VirtualList ref={ref}></VirtualList>
|
|
100
|
+
</>
|
|
101
|
+
);
|
|
102
|
+
}
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
Irrelevant parts are omitted in the above code. `VirtualListHandle` is a `typescript` type, please ignore it if you are using pure JS.
|
|
106
|
+
|
|
107
|
+
`VirtualListHandle` type code.
|
|
108
|
+
|
|
109
|
+
```ts
|
|
110
|
+
interface VirtualListHandle {
|
|
111
|
+
scrollToIndex(
|
|
112
|
+
index: number,
|
|
113
|
+
block?: "start" | "end" | "center" | "nearest"
|
|
114
|
+
): void;
|
|
115
|
+
getRootElement(): HTMLElement;
|
|
116
|
+
forceUpdate(): void;
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
Then use the `ref` object to access the exposed methods.
|
|
121
|
+
|
|
122
|
+
- `scrollToIndex`: `(index:number, block = 'start'):void`. Scroll to the specified index position. `block` is equal to the `block` option of the HTML native method `scrollIntoView`.
|
|
123
|
+
- `getRootElement`: Get list HTML element。
|
|
124
|
+
- `forceUpdate`: Forcefully re-render the list. This can be called after the visible area of the list changes.
|
|
125
|
+
|
|
126
|
+
## Note
|
|
127
|
+
|
|
128
|
+
- Remember to set the height of the list. Class, style, px, em, percentage, etc. are all acceptable.
|
|
129
|
+
- Delayed loading, loading when scrolling to the bottom, etc. can be implemented using the exposed `onScroll`.
|
|
130
|
+
|
|
131
|
+
## IIFE
|
|
132
|
+
|
|
133
|
+
The `dist/index.iife.js` file can be run in the browser.
|
|
134
|
+
You can host it on your server and then use the `script` tag to include it. Before including it, you also need to include `react`, `react-dom`. The global variable exposed by this file is `reactBaseVirtualList`, you can access all the exports of this file through `window.reactBaseVirtualList`, and get the main component exported through `window.reactBaseVirtualList.VirtualList`.
|
|
135
|
+
|
|
136
|
+
You can also use the following third-party CDN url to include it.
|
|
137
|
+
|
|
138
|
+
- unpkg: https://unpkg.com/react-base-virtual-list
|
|
139
|
+
- jsdelivr: https://cdn.jsdelivr.net/npm/react-base-virtual-list
|
|
140
|
+
|
|
141
|
+
## Development
|
|
142
|
+
|
|
143
|
+
- `lib`: The main files, also the files that are packaged into the library. Running `npm run build` will package the files in this directory into the `dist` folder. The corresponding Vite configuration file is `vite.build.ts`.
|
|
144
|
+
- `src`: The files used for development and debugging. Running `npm run dev` will run the code in this directory in the browser. Running `npm run build:web` will package the code in this directory into the `dist` folder. The corresponding Vite configuration file is `vite.config.ts`.
|
|
145
|
+
- `uno.config.ts`: [unocss](https://github.com/unocss/unocss) configuration file. `unocss` only works in the `src` folder. With the current configuration, you can use `Tailwindcss` style class names.
|
|
146
|
+
- `.github/workflows/build.yml`: Some automated actions performed when publishing to GitHub. You can delete or modify it.
|
|
147
|
+
|
|
148
|
+
## Changelog
|
|
149
|
+
|
|
150
|
+
https://github.com/phphe/react-base-virtual-list/releases
|