Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@tanstack/react-virtual
Advanced tools
Headless UI for virtualizing scrollable elements in React
The @tanstack/react-virtual npm package is designed to help developers efficiently render large lists and tabular data by virtualizing rows and columns. This means only the items in the viewport plus a small buffer are rendered, significantly improving performance for large datasets.
Virtualized Lists
This feature allows for the rendering of large lists by virtualizing the rows, meaning only the items that are currently in the viewport (plus a small buffer) are rendered. This significantly improves performance for lists with a large number of items.
import { useVirtualizer } from '@tanstack/react-virtual';
function MyVirtualList() {
const parentRef = React.useRef();
const rowVirtualizer = useVirtualizer({
count: 10000, // Number of items
getScrollElement: () => parentRef.current,
});
return (
<div ref={parentRef} style={{ height: `150px`, width: `300px`, overflow: 'auto' }}>
<div style={{ height: rowVirtualizer.getTotalSize() + `px`, width: '100%', position: 'relative' }}>
{rowVirtualizer.getVirtualItems().map(virtualRow => (
<div key={virtualRow.index} style={{ position: 'absolute', top: 0, left: 0, width: '100%', transform: `translateY(${virtualRow.start}px)` }}>
Row {virtualRow.index}
</div>
))}
</div>
</div>
);
}
Virtualized Grids
This feature extends the concept of virtualization to grids, allowing for efficient rendering of large tabular data. Both rows and columns are virtualized, ensuring that only the cells in the viewport are rendered.
import { useVirtualizer } from '@tanstack/react-virtual';
function MyVirtualGrid() {
const parentRef = React.useRef();
const rowVirtualizer = useVirtualizer({
count: 10000, // Number of items in a row
getScrollElement: () => parentRef.current,
});
const columnVirtualizer = useVirtualizer({
count: 100, // Number of columns
getScrollElement: () => parentRef.current,
});
return (
<div ref={parentRef} style={{ height: `150px`, width: `300px`, overflow: 'auto' }}>
<div style={{ height: rowVirtualizer.getTotalSize() + `px`, width: columnVirtualizer.getTotalSize() + 'px', position: 'relative' }}>
{rowVirtualizer.getVirtualItems().map(row => (
{columnVirtualizer.getVirtualItems().map(column => (
<div key={`${row.index}-${column.index}`} style={{ position: 'absolute', top: `${row.start}px`, left: `${column.start}px`, width: '100%', height: '20px' }}>
Cell {row.index}, {column.index}
</div>
))}
))}
</div>
</div>
);
}
React-window is a popular library for virtualizing long lists and tabular data in React applications. It offers similar functionalities to @tanstack/react-virtual but with a different API design and potentially less flexibility in handling dynamic sizes and complex grid structures.
React-virtualized is another comprehensive library for virtualizing lists and tables in React. It provides a wide range of components and utilities for virtualization, including auto-sizing, dynamic row heights, and more. Compared to @tanstack/react-virtual, react-virtualized might offer more out-of-the-box features but could be heavier and more complex to integrate for simple use cases.
FAQs
Headless UI for virtualizing scrollable elements in React
We found that @tanstack/react-virtual demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.