react-scrollable-list

WebJar for react-scrollable-list

License	MIT
Categories	React User Interface Web Frameworks
GroupId	org.webjars.npm
ArtifactId	react-scrollable-list
Last Version	1.1.3
Release Date	Jul 17, 2017
Type	jar
Description	react-scrollable-list WebJar for react-scrollable-list
Project URL	http://webjars.org
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

How to add to project

Apache Maven

<!-- 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>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/react-scrollable-list/
implementation 'org.webjars.npm:react-scrollable-list:1.1.3'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/react-scrollable-list/
implementation ("org.webjars.npm:react-scrollable-list:1.1.3")

Apache Buildr

'org.webjars.npm:react-scrollable-list:jar:1.1.3'

Apache Ivy

<dependency org="org.webjars.npm" name="react-scrollable-list" rev="1.1.3">
  <artifact name="react-scrollable-list" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='react-scrollable-list', version='1.1.3')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "react-scrollable-list" % "1.1.3"

Leiningen

[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

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 Jul 17, 2017