feat: rename sticky to persistentIndices

Author: phphe

src/VirtualList.tsx

@@ -18,7 +18,7 @@ export type Props<ITEM> = {
   buffer?: number,
   items: ITEM[],
   renderItem: (item: ITEM, index: number) => ReactNode,
-  sticky?: number[], // index[]
+  persistentIndices?: number[], // index[]
   className?: string,
   style?: React.CSSProperties,
 } & OptionalKeys<typeof defaultProps>
@@ -65,8 +65,8 @@ export const VirtualList = forwardRef(function <ITEM>(
     endIndex = count - Math.floor(bottomSpace / itemSize)
   }
   const mainVisibleIndexes = Array.from({ length: endIndex - startIndex }, (_, index) => index + startIndex);
-  let visibleIndexes = mainVisibleIndexes.concat(props.sticky || [])
-  if (props.sticky?.length) {
+  let visibleIndexes = mainVisibleIndexes.concat(props.persistentIndices || [])
+  if (props.persistentIndices?.length) {
     visibleIndexes = [...new Set(visibleIndexes)].sort((a, b) => a - b)
   }
   const visible = visibleIndexes.map(i => props.items[i])

src/examples/sticky.tsx

@@ -5,12 +5,14 @@ export default function StickyExample() {
   return <>
     <h2>Sticky</h2>
     <ul>
-      <li>"sticky" support multiple items.</li>
+      <li>Use prop 'persistentIndices' to make items persistent.</li>
+      <li>"persistentIndices" support multiple items.</li>
+      <li>Use css 'position:sticky' make items sticky.</li>
     </ul>
     <VirtualList
       items={exampleData}
       style={{ height: '600px', border: '1px solid #ccc', padding: '10px' }}
-      sticky={[1]} // sticky the second item
+      persistentIndices={[1]} // sticky the second item
       renderItem={(item, index) => <div key={index} style={{ marginBottom: '10px', ...index === 1 && { position: 'sticky', top: 0, background: '#fff', zIndex: 2 } }}>
         <h3>{index}. {item.headline}</h3>
         <div>