Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@digitalprezence/react-virtuoso
Advanced tools
Readme
React Virtuoso is the most powerful React virtual list/table component, full stop. Here's why:
For live examples and documentation, check the documentation website.
If you are using Virtuoso for work, sponsor it. Any donation helps a lot with the project development and maintenance.
npm install react-virtuoso
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Virtuoso } from 'react-virtuoso'
const App = () => {
return <Virtuoso style={{ height: '400px' }} totalCount={200} itemContent={index => <div>Item {index}</div>} />
}
ReactDOM.render(<App />, document.getElementById('root'))
The GroupedVirtuoso
component is a variant of the "flat" Virtuoso
, with the following differences:
totalCount
, the component exposes groupCounts: number[]
property, which specifies the amount of items in each group.
For example, passing [20, 30]
will render two groups with 20 and 30 items each;itemContent
property, the component requires an additional groupContent
property,
which renders the group header. The groupContent
callback receives the zero-based group index as a parameter.The VirtuosoGrid
component displays same sized items in multiple columns.
The layout and item sizing is controlled through CSS class properties, which allows you to use media queries, min-width, percentage, etc.
The TableVirtuoso
component works just like Virtuoso
, but with HTML tables.
It supports window scrolling, sticky headers, sticky columns, and works with React Table and MUI Table.
You can customize the markup up to your requirements - check the Material UI list demo. If you need to support reordering, check the React Sortable HOC example.
For in-depth documentation and live examples of the supported features and live demos, check the documentation website.
To support legacy browsers, you might have to load a ResizeObserver Polyfill before using react-virtuoso
:
import ResizeObserver from 'resize-observer-polyfill'
if (!window.ResizeObserver)
window.ResizeObserver = ResizeObserver
Petyo Ivanov @petyosi.
To run the tests, use npm run test
.
An end-to-end browser-based test suite is runnable with npm run e2e
, with the pages being e2e/*.tsx
and the tests e2e/*.test.ts
.
A convenient way to debug something is to preview the test cases in the browser.
To do that, run npm run browse-examples
- it will open a crude UI that lets you browse the components in the e2e
folder.
The documentation site is built with docusaurus and the content is available in the site/docs
directory.
The API reference is generated from the doc comments in src/components.tsx
.
MIT License.
FAQs
Unknown package
The npm package @digitalprezence/react-virtuoso receives a total of 56 weekly downloads. As such, @digitalprezence/react-virtuoso popularity was classified as not popular.
We found that @digitalprezence/react-virtuoso demonstrated a not healthy version release cadence and project activity because the last version was released 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.