react-virtualized | React components for efficiently rendering large lists | Grid library

 by   bvaughn JavaScript Version: 10.0.0-alpha.17 License: MIT

kandi X-RAY | react-virtualized Summary

kandi X-RAY | react-virtualized Summary

react-virtualized is a JavaScript library typically used in User Interface, Grid, React Native, React applications. react-virtualized has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i wwc-react-virtualized' or download it from GitHub, npm.

If you're considering adding react-virtualized to a project, take a look at react-window as a possible lighter-weight alternative. Learn more about how the two libraries compare here.

            kandi-support Support

              react-virtualized has a medium active ecosystem.
              It has 25026 star(s) with 3140 fork(s). There are 237 watchers for this library.
              It had no major release in the last 12 months.
              There are 441 open issues and 736 have been closed. On average issues are closed in 170 days. There are 62 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of react-virtualized is 10.0.0-alpha.17

            kandi-Quality Quality

              react-virtualized has 0 bugs and 0 code smells.

            kandi-Security Security

              react-virtualized has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              react-virtualized code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              react-virtualized is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              react-virtualized releases are available to install and integrate.
              Deployable package is available in npm.
              Installation instructions, examples and code snippets are available.
              react-virtualized saves you 498 person hours of effort in developing the same functionality from scratch.
              It has 1170 lines of code, 0 functions and 179 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi has reviewed react-virtualized and discovered the below as its top functions. This is intended to give you an instant insight into react-virtualized implemented functionality, and help decide if they suit your requirements.
            • Iterates through the given range and pushes it to the end of the result .
            • Handle sort direction
            • Get the size measure .
            • Default cell renderer .
            • Creates an interval tree
            • Wrap a grid indicator in DOM .
            • Renders a single item .
            • Create cell renderer .
            • Create auto - generated CSS builder function
            • Serializes a component .
            Get all kandi verified functions for this library.

            react-virtualized Key Features

            No Key Features are available at this moment for react-virtualized.

            react-virtualized Examples and Code Snippets

            Are there any "sub packages" for importing parts of react-virtualized?
            Lines of Code : 15dot img1License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            // But if you only use a few react-virtualized components,
            // And you're concerned about increasing your application's bundle size,
            // You can directly import only the components you need, like so:
            import AutoSizer from 'react-virtualized/

            Community Discussions


            searchable dropdown list in react
            Asked 2022-Mar-10 at 20:05

            I have serchable dropdown list in react. for that I have used VirtualizedSelect the problem is onChange is not working.



            Answered 2022-Mar-10 at 20:05

            This is how you could approach this:



            searchable dropdown in react
            Asked 2022-Mar-10 at 15:26

            I have below list in react.



            Answered 2022-Mar-10 at 15:07

            according to VirtualizedSelect docs here, the component accept array of objects like :



            Windowing with Antd in Next.js breaks tooltips and popovers
            Asked 2022-Mar-09 at 06:08

            I'm experimenting with the windowing technique in Next.js with Antd, and I made this simple app that has this index.tsx page:



            Answered 2022-Mar-09 at 06:08

            I finally found a solution after much agony.

            Apparently, Nextjs wraps the entire layout with a div with id __next. That's the outer-most container of the entire page, and its height is not set, so since the content of FixedSizeList is positioned such that it's outside of the regular page flow, the __next div gets a height of 0.

            I don't know if there is any better solution, but I simply added this little style in the globals.css file:



            react-beautiful-dnd doesn’t work properly with react-virtualized Table component
            Asked 2022-Feb-18 at 02:06
            Expected behaviour

            Row should get dragged to its destination index when dragged from top to bottom and vice versa with DnD animation.

            Actual behaviour

            Row doesn’t get DnD when dragged from bottom to top index. Top to bottom drag works but the item is added after the last page index and not to the destination index. DnD animation seems not to be working as well.

            Steps to reproduce

            You can refer this sandbox to replicate the issue.

            Case 1: Top to bottom drag

            1. Try to drag and the row from top to bottom index
            2. you will see the row gets dragged to last index of the page not the destination index

            Case 2. Bottom to Top drag

            1. Try to drag and the row from bottom to top index
            2. you will observe the rows doesn’t get dragged and onDragEnd is not called.

            The same code works with react-virtualized's List component but not the Table component.

            What version of React are you using?


            What version of react-beautiful-dnd are you running?


            What version of react-virtualized are you running?


            What browser are you using?



            I have created this sandbox to replicate the issue. You can run this to check the issue.


            Can anyone take a look at the sandbox and help me out? Let me know if you need another info!


            So today, I debug this more and made some progress. Looks like the issue was with rowRenderer implementation. There was an extra wrapper div on top of defaultRowRenderer's dom. I was able to solve the issue partially. Here is the new sandbox link with the updated code.

            Now, there's one issue left is scroll doesn't work while dragging the row. Any pointers how can I fix this?



            Answered 2022-Feb-18 at 02:06

            Finally, solved the issue (not sure if this is the right way). The solution was to pass ref as react virtualized scrolling wrapper div instead of react-virtualized main wrapper div.

            I had updated the above sandbox with the fix.




            How to make responsive image grid using react-virtualize
            Asked 2021-Dec-30 at 06:47

            I am trying to render the responsive image grid, which might have images of different sizes. It sounds like the Masonry component is good fit for this case, but not sure that I am able to use this example in my application? It looks fully coupled to the place where it lives, I tried to take relevant parts, but I wasn't able to get working.

            Also, I have tried to generate relevant code with wizard, and got this sample:



            Answered 2021-Dec-30 at 06:47

            from the image you attached it seems like your images are not dynamically measured. consider adding this library

            you need to add something like this:



            data updating before waiting for api call react
            Asked 2021-Sep-25 at 19:11

            I am working on a react app where I have table with scroller and on every scroll I am updating the page number and making a subsquent api call with the updated page number but the page number is updating so fast that it exceeds the limit of page number and the api returns empty array and that leads to imcomplete data.

            Here's my code:



            Answered 2021-Sep-25 at 19:11

            You are loading a new page on every scroll interaction. If the user scrolls down by 5 pixels, do you need to load an entire page of data? And then another page when the scrolls down another 2 pixels? No. You only need to load a page when you have reached the end of the available rows.

            You could use some math to figure out which pages need to be loaded based on the scrollTop position in the onScroll callback and the rowHeight variable.

            But react-virtualized contains an InfiniteLoader component that can handle this for you. It will call a loadMoreRows function with the startIndex and the stopIndex of the rows that you should load. It does not keep track of which rows have already been requested, so you'll probably want to do that yourself.

            Here, I am storing the API responses in a dictionary keyed by index, essentially a sparse array, to support any edge cases where the responses come back out of order.

            We can check if a row is loaded by seeing if there is data at that index.

            We will load subsequent pages when the loadMoreRows function is called by the InfiniteList component.



            Error: Invalid hook call how can i solve it?
            Asked 2021-Sep-21 at 11:54

            this is the error i received

            Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

            1. You might have mismatching versions of React and the renderer (such as React DOM)
            2. You might be breaking the Rules of Hooks
            3. You might have more than one copy of React in the same app See for tips about how to debug and fix this problem.

            This is my code:



            Answered 2021-Sep-21 at 11:54

            You cannot use useState in non functional component. You're using it in a method called HandleAdd. HandleAdd is not a component! You're using classify component. You need to move the HandleAdd into your component and use the class component's own state and setState :



            React window how to iterate your data?
            Asked 2021-Sep-16 at 12:36
            import { FixedSizeList as List } from 'react-window'
            import AutoSizer from 'react-virtualized-auto-sizer'
            const TrackTable = ({ tracks }) => {
                const Row = ({ index, style }) => (
                        Row {index}
                const AllRows = () => {
                    const arr = [
                        { code: '12H', id: '1' },
                        { code: '4gf', id: '2' },
                    return, index) => {
                        return {i.code}
                return (
                        {({ height, width }) => (


            Answered 2021-Sep-16 at 11:50

            You call AllRows without proprty, in this case tracks is undefined ==> you will have the error is not a function

            to avoid that, call AllRows with an array :



            Type 'typeof Row' is not assignable to type 'ComponentType> & ReactNode'. TS2769
            Asked 2021-Aug-30 at 13:20

            I am putting together an infinite scrolling list using react-window and am getting a typescript build error. I've searched stack overflow and fixed a few other previous errors but I was unable to fix this last one.

            Here is the code in codesandbox:

            Same copy of the code as in the link here:



            Answered 2021-Aug-30 at 13:20

            You just need to add data property to Row component props.



            Ignore peer dependency check for single package in package.json
            Asked 2021-Aug-19 at 13:59

            I try to exclude the package react-virtualized from the peer dependency checking of NPM 7. I know I could separately install that package with

            npm install react-virtualized --legacy-peer-deps

            ...but my goal is to install all packages with npm install and this one shall not be checked for peer dependencies. Is that possible?

            I would accept any answer that shows me how to manipulate the package.json so that a fresh npm install runs without peer dependency errors. I have the following package.json:



            Answered 2021-Aug-19 at 13:59

            There isn't a way to do that within your own package.json as far as I am aware. The change would need to happen in the package.json for the react-virtualized package. Perhaps one of these alternatives will work for you:

            1. Set legacy-peer-deps in a .npmrc file for your project. This won't work if people are installing your project via npm but if your project is cloned from a git repository or otherwise downloaded, and then people run npm install from there, including a .npmrc in the project should work.

            2. Require using npm@6 which will be more lenient about peer dependency checks. You can specify the npm version in the "engines" field in your package.json.

            3. Install react-virtualized from GitHub. The master branch (and, as of this writing, unfortunately only the master branch) has the d36509817ac44 commit which added react@17 and react-dom@17 as acceptable peer dependencies. Because this code is not in any release yet, you may be getting a version of the module that is unstable. To do this: npm install git+

            4. Use react@16 and react-dom@16 instead of @17 for each.


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install react-virtualized

            Install react-virtualized using npm.


            API documentation available here.
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • npm

            npm i react-virtualized

          • CLONE
          • HTTPS


          • CLI

            gh repo clone bvaughn/react-virtualized

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link