JarCasting
JarCasting JarCasting

react-scrollable-list

WebJar for react-scrollable-list

License

License

MIT
Categories

Categories

React User Interface Web Frameworks
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

react-scrollable-list
Last Version

Last Version

1.1.3
Release Date

Release Date
Type

Type

jar
Description

Description

react-scrollable-list
WebJar for react-scrollable-list
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/jwarning/react-scrollable-list

Download react-scrollable-list

Filename Size
react-scrollable-list-1.1.3.pom
react-scrollable-list-1.1.3.jar 7 KB
react-scrollable-list-1.1.3-sources.jar 22 bytes
react-scrollable-list-1.1.3-javadoc.jar 22 bytes
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/react-scrollable-list/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>react-scrollable-list</artifactId>
    <version>1.1.3</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/react-scrollable-list/
implementation 'org.webjars.npm:react-scrollable-list:1.1.3'
// https://jarcasting.com/artifacts/org.webjars.npm/react-scrollable-list/
implementation ("org.webjars.npm:react-scrollable-list:1.1.3")
'org.webjars.npm:react-scrollable-list:jar:1.1.3'
<dependency org="org.webjars.npm" name="react-scrollable-list" rev="1.1.3">
  <artifact name="react-scrollable-list" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='react-scrollable-list', version='1.1.3')
)
libraryDependencies += "org.webjars.npm" % "react-scrollable-list" % "1.1.3"
[org.webjars.npm/react-scrollable-list "1.1.3"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

React Scrollable List

npm version

React Scrollable List is a scrollable, high-performance list component for rendering large lists of items with React. It's performance really shines when dealing with lists in excess of a thousand items, and scales well into the millions or more. Due to it only rendering a small slice of the list into the DOM at any time based on the scroll position, it removes most of the speed issues with web browsers and rendering very large amounts of DOM nodes at once.

Demo

jwarning.github.io/react-scrollable-list

The component is generic and renders a simple component comprised of a div wrapper and div containers for each of the elements currently rendered.

To style the elements you can simply refer to the .react-scrollable-list and the .react-scrollable-list-item classes. The list items need to be passed in via props in the following format:

{
  id: 'a unique identifier',
  content: 'the content to display inside the div'
}

The content can alternatively also be another react component.

The component takes up to four props:

  • listItems: an array of items in the format specified above
  • heightOfItem: the CSS height of each item (needs to be the same for each item)
  • maxItemsToRender: an optional number which tells the component how many components before and after the item scrolled to it should pre-render
  • style: an optional style object to add inline styling through JS
<ReactScrollableList
  listItems=[...]
  heightOfItem={30}
  maxItemsToRender={50}
  style={{ color: '#333' }}
/>

Notes

To build a CommonJS version of this file simply run npm run build. A build is already included in the dist folder.

License

MIT

Versions

Version
1.1.3