A tiny but mighty 3kb list virtualization library, with zero dependencies 💪 Supports variable heights/widths, sticky items, scrolling to index, and more!

Overview

react-tiny-virtual-list

A tiny but mighty list virtualization library, with zero dependencies 💪

npm version npm downloads Build Status codecov typescript license Gitter

  • Tiny & dependency free – Only 3kb gzipped
  • Render millions of items, without breaking a sweat
  • Scroll to index or set the initial scroll offset
  • Supports fixed or variable heights/widths
  • Vertical or Horizontal lists

Check out the demo for some examples, or take it for a test drive right away in Code Sandbox.

Getting Started

Using npm:

npm install react-tiny-virtual-list --save

ES6, CommonJS, and UMD builds are available with each distribution. For example:

import VirtualList from 'react-tiny-virtual-list';

You can also use a global-friendly UMD build:

<script src="react-tiny-virtual-list/umd/react-tiny-virtual-list.js"></script>
<script>
var VirtualList = window.VirtualList;
...
</script>

Example usage

import React from 'react';
import {render} from 'react-dom';
import VirtualList from 'react-tiny-virtual-list';

const data = ['A', 'B', 'C', 'D', 'E', 'F', ...];

render(
  <VirtualList
    width='100%'
    height={600}
    itemCount={data.length}
    itemSize={50} // Also supports variable heights (array or function getter)
    renderItem={({index, style}) =>
      <div key={index} style={style}> // The style property contains the item's absolute position
        Letter: {data[index]}, Row: #{index}
      </div>
    }
  />,
  document.getElementById('root')
);

Prop Types

Property Type Required? Description
width Number | String* Width of List. This property will determine the number of rendered items when scrollDirection is 'horizontal'.
height Number | String* Height of List. This property will determine the number of rendered items when scrollDirection is 'vertical'.
itemCount Number The number of items you want to render
renderItem Function Responsible for rendering an item given it's index: ({index: number, style: Object}): React.PropTypes.node. The returned element must handle key and style.
itemSize Either a fixed height/width (depending on the scrollDirection), an array containing the heights of all the items in your list, or a function that returns the height of an item given its index: (index: number): number
scrollDirection String Whether the list should scroll vertically or horizontally. One of 'vertical' (default) or 'horizontal'.
scrollOffset Number Can be used to control the scroll offset; Also useful for setting an initial scroll offset
scrollToIndex Number Item index to scroll to (by forcefully scrolling if necessary) x
scrollToAlignment String Used in combination with scrollToIndex, this prop controls the alignment of the scrolled to item. One of: 'start', 'center', 'end' or 'auto'. Use 'start' to always align items to the top of the container and 'end' to align them bottom. Use 'center' to align them in the middle of the container. 'auto' scrolls the least amount possible to ensure that the specified scrollToIndex item is fully visible.
stickyIndices Number[] An array of indexes (eg. [0, 10, 25, 30]) to make certain items in the list sticky (position: sticky)
overscanCount Number Number of extra buffer items to render above/below the visible items. Tweaking this can help reduce scroll flickering on certain browsers/devices.
estimatedItemSize Number Used to estimate the total size of the list before all of its items have actually been measured. The estimated total height is progressively adjusted as items are rendered.
onItemsRendered Function Callback invoked with information about the slice of rows/columns that were just rendered. It has the following signature: ({startIndex: number, stopIndex: number}).
onScroll Function Callback invoked whenever the scroll offset changes within the inner scrollable region. It has the following signature: (scrollTop: number, event: React.UIEvent<HTMLDivElement>).

* Width may only be a string when scrollDirection is 'vertical'. Similarly, Height may only be a string if scrollDirection is 'horizontal'

Public Methods

recomputeSizes (index: number)

This method force recomputes the item sizes after the specified index (these are normally cached).

VirtualList has no way of knowing when its underlying data has changed, since it only receives a itemSize property. If the itemSize is a number, this isn't an issue, as it can compare before and after values and automatically call recomputeSizes internally. However, if you're passing a function to itemSize, that type of comparison is error prone. In that event, you'll need to call recomputeSizes manually to inform the VirtualList that the size of its items has changed.

Common Issues with PureComponent

react-tiny-virtual-list uses PureComponent, so it only updates when it's props change. Therefore, if only the order of your data changes (eg ['a','b','c'] => ['d','e','f']), react-tiny-virtual-list has no way to know your data has changed and that it needs to re-render.

You can force it to re-render by calling forceUpdate on it or by passing it an extra prop that will change every time your data changes.

Reporting Issues

Found an issue? Please report it along with any relevant details to reproduce it. If you can, please provide a live demo replicating the issue you're describing. You can fork this Code Sandbox as a starting point.

Contributions

Feature requests / pull requests are welcome, though please take a moment to make sure your contributions fits within the scope of the project. Learn how to contribute

Acknowledgments

This library draws inspiration from react-virtualized, and is meant as a bare-minimum replacement for the List component. If you're looking for a tiny, lightweight and dependency-free list virtualization library that supports variable heights, you're in the right place! If you're looking for something that supports more use-cases, I highly encourage you to check out react-virtualized instead, it's a fantastic library ❤️

License

react-tiny-virtual-list is available under the MIT License.

Comments
  • Allow user to render their own wrapper (useful for tables)

    Allow user to render their own wrapper (useful for tables)

    Thanks for the great library! I've added a renderWrapper function this allows a user to use components other the <div> for the two wrappers (such as table and tbody with appropriate styling).

    An example using material-ui:

    import * as React from 'react';
    import * as ReactDOM from 'react-dom';
    import { Table, TableHead, TableBody, TableCell, TableRow } from 'material-ui';
    import { withStyles } from 'material-ui/styles';
    
    import VirtualList from '../../src/';
    import './demo.css';
    
    const styles = ({
      table: {
        display: 'block',
        '& thead': {
          display: 'block',
        },
        '& tbody': {
          display: 'block',
        },
        '& tr': {
          display: 'table',
          width: '100%',
        },
      },
    });
    
    const TableWithRef = withStyles<any>(styles)(
      ({ classes, className, tableRef, children, ...others }: any) =>
        <table className={`${classes.table} ${className}`} ref={tableRef} {...others}>
          {children}
        </table>);
    
    class Demo extends React.Component {
      renderWrapper = (outerProps, ref, innerStyle, items) => {
        return (
          <Table tableRef={ref} {...outerProps} component={TableWithRef}>
            <TableHead>
              <TableRow>
                <TableCell>Test</TableCell>
              </TableRow>
            </TableHead>
            <TableBody style={innerStyle}>
              {items}
            </TableBody>
          </Table>);
      }
    
      renderItem = ({ style, index }: { style: React.CSSProperties, index: number }) => {
        return (
          <TableRow className="Row" style={style} key={index}>
            <TableCell>
              Row #{index}
            </TableCell>
          </TableRow>
        );
      }
    
      render() {
        return (
          <div className="Root">
            <VirtualList
              width="auto"
              height={400}
              itemCount={1000}
              renderItem={this.renderItem}
              renderWrapper={this.renderWrapper}
              itemSize={58}
              className="VirtualList"
            />
          </div>
        );
      }
    }
    
    ReactDOM.render(<Demo />, document.querySelector('#app'));
    
    opened by eyn 14
  • Should `height` actually be `max-height`?

    Should `height` actually be `max-height`?

    There's a way to set a custom height for the list. This property is used to set the height in css. Would it make sense to change it for max-height?

    I could eventually do something like this. But the lib should probably do it?

    height={Math.min(items.length * 50, 300)}
    
    opened by tleunen 7
  • support scrollToIndexIfNecessary?

    support scrollToIndexIfNecessary?

    I'm trying to support react-tiny-virtual-list in a nice way in downshift and it would be very helpful if there were a way to have react-tiny-virtual-list only scroll to an index if that node is not currently visible.

    See this example and the live demo here.

    Thanks!

    enhancement 
    opened by kentcdodds 6
  • Use passive event listener and add support for debouncing onScroll

    Use passive event listener and add support for debouncing onScroll

    This adds a couple of workarounds for the performance drops described in #45 by using passive event listeners and adding support for (optionally) debouncing the scroll event handler.

    Note: This is strictly speaking a breaking change, since onScroll is now called with a native event instead of React.UIEvent<HTMLDivElement> as second parameter.

    Note 2: Had to upgrade TypeScript to get typings for third parameter to addEventListener

    Note 3: This adds the debounce package as dependency, so it's technically not zero dependency anymore (debounce is ~500b minified & gzipped, btw.)

    opened by bjoerge 5
  • Scroll lagging/slow performance

    Scroll lagging/slow performance

    Hi,

    This looks like a great little add on (only 3kb's!).

    I'm having some difficultly implementing. I tried following your example, but had no success. T

    I had some success. But performance isn't great. The scroll is laggy. I've probably implemented it wrong.

    See here https://codesandbox.io/s/vo1xjpxrL

    Here's the code:

    class App extends React.Component {
      constructor() {
        super();
        this.state = {
          demoData: x.demoData,
        };
      }
      render() {
        return (
            <VirtualList
        width='100%'
        height={800}
        itemCount={this.state.demoData.length}
        itemSize={50}
        renderItem={({index, style}) =>
          <div style={style} key={index}> 
    {this.state.demoData.map(e => {
              return <Result e={e}/>;
            })[index]}
          </div>
        }
      />
    
        );
      }
    }
    
    class Result extends React.Component {
      render() {
        const { e, remove } = this.props;
    
        return (
          <div key={e.id}>
            {e.name} {' '} {e.id}
          </div>
        );
      }
    }
    

    Cheers,

    opened by yarnball 5
  • Height of item

    Height of item

    Can I set height of my item is dynamically.? This depency is good I got more 1000 data is works fine. But when i resize my window to min-wid. If line to ling the go to nextLine so the height of item broken. U say height item can be set with function. If cannt set dynamically can u gift some example to use function for height of item

    opened by rahmatkruniawan 5
  • Add support for sticky items

    Add support for sticky items

    This PR adds a stickyIndices prop to add support for sticky headers:

    The prop accepts an array of indices that should be made sticky (eg, stickyIndices={[0, 20, 50, 100]})

    The solution relies on position: sticky, so it will only work in browsers that support that feature, but will degrade gracefully for other browsers.

    It also works with horizontal lists:

    How to test locally

    Clone the project and check out this branch. Run yarn followed by npm start.

    To-do

    • [x] Update documentation
    • [x] Add test coverage for stickyIndices
    • [ ] Update demo site
    opened by clauderic 4
  • Fix for Scrolling With Firefox Under Windows/Ubuntu

    Fix for Scrolling With Firefox Under Windows/Ubuntu

    ... and some other edge cases.

    Inspiration for the fix was drawn from this merge request in react-virtualized: https://github.com/bvaughn/react-virtualized/pull/110

    opened by Magnitus- 4
  • Dynamic inserting does not work

    Dynamic inserting does not work

    I have a reproduction of the issue here: https://www.webpackbin.com/bins/-KgWJv_0IC1-9cyvzud8

    As you can see from the comment inside Hello.js, the list only renders the items initially populated inside the provided list. If you update that list after the VirtualList is rendered, it does not re-render to reflect those changes.

    I'm trying to use this component for an insert-heavy project, does this library not support dynamic inserting? If not, is this something you are wanting to support?

    opened by garetmckinley 4
  • Height 100%

    Height 100%

    Hi! I'm not a 100% sure if this is an actual issue, or if I'm just using it wrong, but I have a variable-height container in which I render a VirtualList with its height set to "100%". This renders only the first item plus the overscanCount.

    Here's an example of what I'm seeing, I've changed two things after forking your example, I've set the height of #root to 500px and I've set the height of VirtualList to 100%: https://codesandbox.io/s/nr91pm8mx0

    Could you advise me if this is actually a bug, or if I'm doing something stupid?

    opened by ErikBooij 3
  • Expose container ref to users

    Expose container ref to users

    Hello!

    I need to be able to imperatively call ref.scroll({ left: n, behavior: 'smooth' }) on the container of a virtualized list based on users clicking a button - at present there is no way to expose that ref, think the simple approach here should work? Is this something you'd support?

    Happy to take a different approach if there's a better way to do this - just let me know and I'd be happy to adjust the PR! 🙂

    opened by thisRaptori 3
  • Bump css-what from 2.1.0 to 2.1.3

    Bump css-what from 2.1.0 to 2.1.3

    Bumps css-what from 2.1.0 to 2.1.3.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Warning: componentWillReceiveProps has been renamed, and is not recommended for use

    Warning: componentWillReceiveProps has been renamed, and is not recommended for use

    In console:

    Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.

    • Move data fetching code or side effects to componentDidUpdate.
    • If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state
    • Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.
    opened by sopilkar 1
  • Bump codecov from 1.0.1 to 3.8.3

    Bump codecov from 1.0.1 to 3.8.3

    Bumps codecov from 1.0.1 to 3.8.3.

    Release notes

    Sourced from codecov's releases.

    v3.8.3

    Fixes

    • #329 fix: Test if response has two lines

    Dependencies

    • #306 Bump eslint-config-prettier from 7.2.0 to 8.3.0
    • #305 Bump eslint from 7.21.0 to 7.25.0
    • #302 Bump mock-fs from 4.13.0 to 4.14.0
    • #308 Bump lodash from 4.17.19 to 4.17.21
    • #309 Bump ignore-walk from 3.0.3 to 3.0.4
    • #310 Bump hosted-git-info from 2.8.8 to 2.8.9
    • #325 Bump prettier from 2.2.1 to 2.3.2
    • #326 Bump actions/setup-node from 2.1.5 to 2.2.0
    • #328 Bump lint-staged from 10.5.4 to 11.0.1
    • #330 Bump eslint from 7.25.0 to 7.31.0
    • #331 Bump ws from 7.3.1 to 7.5.3
    • #332 Bump urlgrey from 0.4.4 to 1.0.0
    • #334 Bump husky from 6.0.0 to 7.0.1
    • #333 Bump teeny-request from 7.0.1 to 7.1.1

    v3.8.2

    3.8.2

    Fixes

    • #304 Add coverage-final.json as a possible coverage file during file lookup

    v3.8.1

    Fixes

    • #246 Revert "Bump teeny-request from 6.0.1 to 7.0.0"

    v3.8.0

    Features

    • #160 Add Github Actions support

    Fixes

    • #173 Fix broken gcov command
    • #195 Update Node testing versions
    • #200 Remove flaky tests
    • #204 Create CHANGELOG and remove flaky v4 test
    • #208 Add license scan report and status
    • #220 Remove errant bitly

    Dependencies

    • #189 Bump lint-staged from 10.0.7 to 10.2.11
    • #190 [Security] Bump handlebars from 4.5.3 to 4.7.6
    • #191 Bump prettier from 1.19.1 to 2.0.5
    • #192 Bump mock-fs from 4.10.4 to 4.12.0
    • #196 Bump teeny-request from 6.0.1 to 7.0.0

    ... (truncated)

    Changelog

    Sourced from codecov's changelog.

    3.8.3

    Fixes

    • #329 fix: Test if response has two lines

    Dependencies

    • #306 Bump eslint-config-prettier from 7.2.0 to 8.3.0
    • #305 Bump eslint from 7.21.0 to 7.25.0
    • #302 Bump mock-fs from 4.13.0 to 4.14.0
    • #308 Bump lodash from 4.17.19 to 4.17.21
    • #309 Bump ignore-walk from 3.0.3 to 3.0.4
    • #310 Bump hosted-git-info from 2.8.8 to 2.8.9
    • #325 Bump prettier from 2.2.1 to 2.3.2
    • #326 Bump actions/setup-node from 2.1.5 to 2.2.0
    • #328 Bump lint-staged from 10.5.4 to 11.0.1
    • #330 Bump eslint from 7.25.0 to 7.31.0
    • #331 Bump ws from 7.3.1 to 7.5.3
    • #332 Bump urlgrey from 0.4.4 to 1.0.0
    • #334 Bump husky from 6.0.0 to 7.0.1
    • #333 Bump teeny-request from 7.0.1 to 7.1.1

    3.8.2

    Fixes

    • #304 Add coverage-final.json as a possible coverage file during file lookup

    3.8.1

    Fixes

    • #246 Revert "Bump teeny-request from 6.0.1 to 7.0.0"

    3.8.0

    Features

    • #160 Add Github Actions support

    Fixes

    • #173 Fix broken gcov command
    • #195 Update Node testing versions
    • #200 Remove flaky tests
    • #204 Create CHANGELOG and remove flaky v4 test
    • #208 Add license scan report and status
    • #220 Remove errant bitly

    Dependencies

    • #189 Bump lint-staged from 10.0.7 to 10.2.11
    • #190 [Security] Bump handlebars from 4.5.3 to 4.7.6
    • #191 Bump prettier from 1.19.1 to 2.0.5

    ... (truncated)

    Commits
    • e22061b Merge pull request #335 from codecov/3.8.3
    • 981df8b 3.8.3
    • 135555c Merge pull request #333 from codecov/dependabot/npm_and_yarn/teeny-request-7.1.1
    • 65b53a3 Merge pull request #334 from codecov/dependabot/npm_and_yarn/husky-7.0.1
    • 6e4af4d Bump teeny-request from 7.0.1 to 7.1.1
    • 1149168 Merge pull request #332 from codecov/dependabot/npm_and_yarn/urlgrey-1.0.0
    • 883785c Merge pull request #331 from codecov/dependabot/npm_and_yarn/ws-7.5.3
    • 04d5ff7 Merge pull request #330 from codecov/dependabot/npm_and_yarn/eslint-7.31.0
    • e6c5bf4 Bump husky from 6.0.0 to 7.0.1
    • f781bc4 Bump ws from 7.3.1 to 7.5.3
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump is-my-json-valid from 2.16.0 to 2.20.6

    Bump is-my-json-valid from 2.16.0 to 2.20.6

    Bumps is-my-json-valid from 2.16.0 to 2.20.6.

    Commits
    Maintainer changes

    This version was pushed to npm by linusu, a new releaser for is-my-json-valid since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump ua-parser-js from 0.7.12 to 0.7.31

    Bump ua-parser-js from 0.7.12 to 0.7.31

    Bumps ua-parser-js from 0.7.12 to 0.7.31.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
Claudéric Demers
Front End Development @Shopify
Claudéric Demers
Simulate normal scrolling by using only fixed number of DOM elements for large lists of items with React Hooks

React Recycled Scrolling Simulate normal scrolling by using only fixed number of DOM elements for large lists of items with React Hooks Install npm in

sarons 30 Sep 2, 2022
A simple hook to create infinite scroll list components

react-infinite-scroll-hook This is a hook to create infinite scroll components! Live demo is here. Basically, we need to set a sentry component to tri

Onur Önder 337 Jan 3, 2023
React components for efficiently rendering large lists and tabular data

React components for efficiently rendering large lists and tabular data. Check out the demo for some examples. Sponsors The following wonderful compan

Brian Vaughn 24.6k Jan 9, 2023
SmartSticky is React component for sticky topbar that will hide when scrolling down and show when scrolling up.

React Smart Sticky Online Demo Features Works like topbars in native applications (Facebook, Medium.com, Instagram etc.) Works on mobile devices Topba

Adam Pietrasiak 14 Dec 16, 2022
This is a tiny React component for scroll bar customization, without dependencies but with a lot of features.

React CustomScroll 5.1 React-customscroll is a tiny React component for scroll bar customization, without dependencies but with a lot of features. Dem

Sergey 50 Jul 4, 2022
React Component used for displaying a responsive grid of aligned, variable width items

React Variable Width Grid When you need to responsively lay out a dynamic number of dynamically sized items. Demo Installation yarn add react-variable

Mike Martinsky 0 May 15, 2022
A tiny(around 1.3kb gzip) React library to generate colorful text placeholders 🎨

React Spectrum A tiny(around 1.3kb gzip) React library to generate colorful text placeholders ?? Inspired by this code illustration on CodeSandbox hom

Ganapati V S 310 Nov 24, 2022
null 136 Dec 30, 2022
🥢 A minimalist-friendly ~1.3KB routing for React and Preact. Nothing else but HOOKS.

wouter is a tiny router for modern React and Preact apps that relies on Hooks. A router you wanted so bad in your project! Features Zero dependency, o

Alexey Taktarov 4.8k Jan 4, 2023
Lightweight MIT React Table component with Sorting, Filtering, Grouping, Virtualization, Editing and many more

The customizable, extendable, lightweight and free React Table Component Site | Demos | Docs Demo link Installation npm npm install ka-table yarn yarn

Alexander Komarov 432 Dec 30, 2022
Tiny (2.3kB) React component for image lazy loading

React Pics Tiny (2.3kB) React component for image lazy loading Demo Table of Contents React Pics Table of Contents Installation Usage Basic With a pla

medipass 32 Dec 26, 2021
react-sticky-scrollspy-nav is a React component that provides smooth scrolling navigation with sections to a web page.

react-sticky-scrollspy-nav react-sticky-scrollspy-nav is a React component that provides smooth scrolling navigation with sections to a web page. How

huurray 8 Aug 31, 2022
Automatically constructs the dependencies hook array for your (p)react hooks based on the dependencies used in the callback!

Automatically constructs the dependencies hook array for your (p)react hooks based on the dependencies used in the callback!

(TS/JS).Gandalf(he/him) 11 May 18, 2022
Harness the power of Intersection Observers for simple list virtualization in React

React RenderIfVisible Harness the power of Intersection Observers for simple list virtualization in React. This tiny React component is a drop-in list

NightCafe Studio 78 Dec 28, 2022
Simulate normal scrolling by using only fixed number of DOM elements for large lists of items with React Hooks

React Recycled Scrolling Simulate normal scrolling by using only fixed number of DOM elements for large lists of items with React Hooks Install npm in

sarons 30 Sep 2, 2022
A hook that will save you from endless scrolling problems! Infinite scrolling that really works and is very easy to integrate

A hook that will save you from endless scrolling problems! Infinite scrolling that really works and is very easy to integrate! This hook allows you to create simple, lightweight components with infinite scrolling in all directions, supporting both windowed and scrollable elements.

Vadim Rogov 70 Jan 1, 2023
A simple data grid component that responsively adjusts layout based on screen widths

A simple data grid component that responsively adjusts layout based on screen widths. Uses a CSS grid layout with repeating rows. Does not fetch, sort, paginate or anything other than layout data in a grid. Those things can be built on top of Gridley if desired but are not built-in.

Brandon Reed 0 May 23, 2022
List Scroll To Index Animated.

List Scroll To Index Animated Technologies | How to run | License ?? Description List Scroll To Index Animated made with react native, Expo and Moti.

Natanael 4 Jan 26, 2022
A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.

[= Become the ?? Ultimate Sponsor of SweetAlert2 and place your banner here (100K+ unique visitors per month) =] A beautiful, responsive, customizable

SweetAlert2 15.4k Jan 4, 2023
A lightweight production-ready Carousel that rocks supports multiple items and server-side rendering with no dependency. Bundle size 2kb.

react-multi-carousel ?? Production-ready, lightweight fully customizable React carousel component that rocks supports multiple items and SSR(Server-si

yi 1k Jan 7, 2023