React components for efficiently rendering large lists and tabular data

Overview

React virtualized

NPM version NPM license NPM total downloads NPM monthly downloads CircleCI Codecov badge OpenCollective OpenCollective

React components for efficiently rendering large lists and tabular data. Check out the demo for some examples.

Sponsors

The following wonderful companies have sponsored react-virtualized:

Learn more about becoming a sponsor!

A word about react-window

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.

Getting started

Install react-virtualized using npm.

npm install react-virtualized --save

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

// Most of react-virtualized's styles are functional (eg position, size).
// Functional styles are applied directly to DOM elements.
// The Table component ships with a few presentational styles as well.
// They are optional, but if you want them you will need to also import the CSS file.
// This only needs to be done once; probably during your application's bootstrapping process.
import 'react-virtualized/styles.css';

// You can import any component you want as a named export from 'react-virtualized', eg
import {Column, Table} from 'react-virtualized';

// 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/dist/commonjs/AutoSizer';
import List from 'react-virtualized/dist/commonjs/List';

Note webpack 4 makes this optimization itself, see the documentation.

If the above syntax looks too cumbersome, or you import react-virtualized components from a lot of places, you can also configure a Webpack alias. For example:

// Partial webpack.config.js
{
  alias: {
    'react-virtualized/List': 'react-virtualized/dist/es/List',
  },
  ...rest
}

Then you can just import like so:

import List from 'react-virtualized/List';

// Now you can use <List {...props} />

You can also use a global-friendly UMD build:

<link rel="stylesheet" href="path-to-react-virtualized/styles.css" />
<script src="path-to-react-virtualized/dist/umd/react-virtualized.js"></script>

Now you're ready to start using the components. You can learn more about which components react-virtualized has to offer below.

Dependencies

React Virtualized has very few dependencies and most are managed by NPM automatically. However the following peer dependencies must be specified by your project in order to avoid version conflicts: react, react-dom. NPM will not automatically install these for you but it will show you a warning message with instructions on how to install them.

Pure Components

By default all react-virtualized components use shallowCompare to avoid re-rendering unless props or state has changed. This occasionally confuses users when a collection's data changes (eg ['a','b','c'] => ['d','e','f']) but props do not (eg array.length).

The solution to this is to let react-virtualized know that something external has changed. This can be done a couple of different ways.

Pass-thru props

The shallowCompare method will detect changes to any props, even if they aren't declared as propTypes. This means you can also pass through additional properties that affect cell rendering to ensure changes are detected. For example, if you're using List to render a list of items that may be re-sorted after initial render- react-virtualized would not normally detect the sort operation because none of the properties it deals with change. However you can pass through the additional sort property to trigger a re-render. For example:

<List {...listProps} sortBy={sortBy} />
Public methods

Grid and Collection components can be forcefully re-rendered using forceUpdate. For Table and List, you'll need to call forceUpdateGrid to ensure that the inner Grid is also updated. For MultiGrid, you'll need to call forceUpdateGrids to ensure that the inner Grids are updated.

Documentation

API documentation available here.

There are also a couple of how-to guides:

Examples

Examples for each component can be seen in the documentation.

Here are some online demos of each component:

And here are some "recipe" type demos:

Supported Browsers

react-virtualized aims to support all evergreen browsers and recent mobile browsers for iOS and Android. IE 9+ is also supported (although IE 9 will require some user-defined, custom CSS since flexbox layout is not supported).

If you find a browser-specific problem, please report it along with a repro case. The easiest way to do this is probably by forking this Plunker.

Friends

Here are some great components built on top of react-virtualized:

  • react-infinite-calendar: Infinite scrolling date-picker with localization, themes, keyboard support, and more
  • react-sortable-hoc: Higher-order components to turn any list into an animated, touch-friendly, sortable list
  • react-sortable-tree: Drag-and-drop sortable representation of hierarchical data
  • react-virtualized-checkbox: Checkbox group component with virtualization for large number of options
  • react-virtualized-select: Drop-down menu for React with windowing to support large numbers of options.
  • react-virtualized-tree: A reactive tree component that aims to render large sets of tree structured data in an elegant and performant way
  • react-timeline-9000: A calendar timeline component that is capable of displaying and interacting with a large number of items

Contributions

Use GitHub issues for requests.

I actively welcome pull requests; learn how to contribute.

Changelog

Changes are tracked in the changelog.

License

react-virtualized is available under the MIT License.

Comments
  • CellMeasurer optimizations

    CellMeasurer optimizations

    Hey, I have seen you did a great job already. I am now about to drop my own custom implementation of the measurer and port everything to the latest react-virtualized.

    A few things I noticed are not good enough for my use case:

    Row height caching.

    Current row height caching is done using the index. However in my case, it is not possible to cache by index, I need a different caching mechanism based on custom id's.

    Row element caching.

    Currently you create a row element twice, once for measuring, once for representation. I can introduce a caching in the user code, so element creation happens only once, however you might want to solve this in the library.

    enhancement discussion performance 
    opened by kof 81
  • will-change: transform seems to create painting issues in Chrome?

    will-change: transform seems to create painting issues in Chrome?

    I am using the List component (8.4.1) for a very long list (2000+) of fairly complicated elements. I have started seeing painting issues but I haven't been able to pin-point the problem exactly. If I flick the scroll wheel on my mouse to zip down the list, then flick the opposite direction - sometimes - when I get to the top of the list, the top cells don't paint. The elements are in the dom and laid out on screen, I can click on the elements and inspect them - but scrolling no longer works and my list component is blank. Resizing the browser, or changing the data in the list seems to trigger a paint and everything is good.

    I have tried adding a "refresh" property to my List, and setting it to today's Date at the end of the scroll to trigger a paint... this doesn't seem to have any effect. What DOES seem to have an effect (but adversely affects scrolling performance) is to override the css property will-change to "auto".

    Sorry, I don't have code that reliably re-creates the problem.

    Any ideas??

    more info needed 
    opened by mcyze 60
  • Safari sometimes interrupts trackpad scrolling during fast swipes

    Safari sometimes interrupts trackpad scrolling during fast swipes

    I see one problem in Safari browser (9.0.3) on my Macbook. I'm trying this example https://bvaughn.github.io/react-virtualized/ with 10000 of rows. If I try to scroll quickly using touchpad, I'll see that from some time is smooth elastic scrolling gone and everything became really choppy.

    bre 17 2016 09 31

    It looks like there is triggered some event which prevents scrolling.

    bug 
    opened by martinpesout 52
  • Infinite scroll in reverse order

    Infinite scroll in reverse order

    Hi, first about my use case: I am building a chat app. Which means it is essentially important to:

    • be able to render a huge amount of rows
    • be able to request additional rows
    • be able to jump in the middle of a 1 year long conversation

    This means that the list we are going to render is potentially just a fragment of a very long list, there are rows after what we have got and there are rows before.

    We need to be able to scroll up and load previous rows as we go, as well as to scroll down and load next rows.

    discussion 
    opened by kof 48
  • Stuttery scrolling in Chrome with `VirtualScroll`

    Stuttery scrolling in Chrome with `VirtualScroll`

    I just noticed that the VirtualScroll element has stuttery scrolling in Chrome. Here's a video: http://jlongster.com/s/chrome-stutter.mp4

    I'm wrapping it in AutoSizer fwiw, but I don't see how that could be related. Don't worry much about the code (it's ClojureScript), the rows it's rendering is pretty basic: just a row of inputs with values. I don't know if anyone else has seen this (I'm using latest master of react-virtualized) and Chrome 48.

    I can try to make a reduced test case later, just thought I'd post this now.

    bug 
    opened by jlongster 48
  • custom layers in scrollable area

    custom layers in scrollable area

    Custom layers in inner scrollable area would be useful to place some non-virtualized content. Eg.:

    • links between items across lines
    • "row" / "column" borders (1 row table for rendering columns and 1 column table to render row borders)

    Example markup based on kendo gantt:

    <!-- 'Grid__innerScrollContainer' content goes here -->
    <div class="k-gantt-tables">
        <table class="k-gantt-rows" style="width: 1400px;">
            <colgroup>
                <col>
            </colgroup>
            <tbody>
                <tr class="k-alt">
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                </tr>
                <tr class="k-alt">
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                </tr>
                <tr class="k-alt">
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                </tr>
                <tr class="k-alt">
                    <td>&nbsp;</td>
                </tr>
            </tbody>
        </table>
        <table class="k-gantt-columns" style="width: 1400px; height: 770px;">
            <colgroup><col><col><col><col><col></colgroup>
            <tbody>
                <tr>
                    <td>&nbsp;</td>
                    <td class="k-nonwork-hour">&nbsp;</td>
                    <td class="k-nonwork-hour">&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="k-gantt-dependencies" style="width: 1400px;">
        <div class="k-line k-line-h" data-uid="374423c0-1b1a-45d2-b14a-fa3426815c1b" style="left: 1299px; top: 191px; width: 10px;"></div>
        <div class="k-line k-line-v" data-uid="374423c0-1b1a-45d2-b14a-fa3426815c1b" style="left: 1307px; top: 191px; height: 17px;"></div>
        <div class="k-line k-line-h" data-uid="374423c0-1b1a-45d2-b14a-fa3426815c1b" style="left: 1089px; top: 208px; width: 220px;"></div>
        <div class="k-line k-line-v" data-uid="374423c0-1b1a-45d2-b14a-fa3426815c1b" style="left: 1089px; top: 208px; height: 333px;"></div>
        <div class="k-line k-line-h" data-uid="374423c0-1b1a-45d2-b14a-fa3426815c1b" style="left: 1089px; top: 541px; width: 9px;"><span class="k-arrow-e"></span>
        </div>
    </div>
    <!-- {childrenToDisplay} -->
    
    discussion 
    opened by Guria 45
  • Faster onScroll with Scrollsync

    Faster onScroll with Scrollsync

    I'm using your example https://bvaughn.github.io/react-virtualized/ to create big datatable with fixed table header. Problem is when I start scrolling to the sides. You can see it on your example (tested in MacOS Chrome with magic mouse). If you scroll to the side you can see that header is updated with some delay. Is there any chance how to improve this speed. I know that it's Javascript solution that calculations take some time, but if you check different solution from Facebook http://facebook.github.io/fixed-data-table/example-object-data.html it's also achieved by Javascript and scrolling is fluid.

    Thanks for your help.

    opened by martinpesout 44
  • Extremely slow scrolling with scroll wheel/arrow keys in Firefox

    Extremely slow scrolling with scroll wheel/arrow keys in Firefox

    When scrolling with the scroll wheel or the arrow keys in Firefox, it does very small increments, meaning I have to do at least four "scrolls" to scroll a single item (row height == 30).

    I'm using the demo at https://bvaughn.github.io/react-virtualized/ , both VirtualScroll and FlexTable are affected, and I'm using Windows 7. Both Firefox 42 and Firefox Developer Edition 44 are affected.

    bug help wanted 
    opened by VictorBlomberg 43
  • Performance issues with Grid.js and scrollTop check

    Performance issues with Grid.js and scrollTop check

    Hi thank you for this library, it's amazing.

    I want to ask what the need of this check?

    I have a component which in some situations animate scrollTop property of VirtualScroll component, and even in production I got 30-50ms per frame (I have a lot of lines on the screen).

    It's because check causes reflow. Just removing this line highly (4+ x times) increases performance of my component without lose of any functionality. I got stable 8ms per frame on scroll animation.

    I've read your comments about autoHeight coupling, and what I want is another boolean property and I know that it's bad idea.

    May be you have any ideas about how to remove this check? Or move all that checks outside control?

    performance 
    opened by istarkov 40
  • FlexTable component becomes very slow with +10 columns

    FlexTable component becomes very slow with +10 columns

    I have been working the past two days to replace our current grid implementation using https://github.com/developerdizzle/react-virtual-list with FlexTable provided by react-virtualized.

    Here is a striped-down version:

    <div style={{ flex: '1 1 auto' }} className={cn}>
        <AutoSizer>
            {({height, width}) => {
                return <FlexTable
                    headerHeight={itemHeight}
                    height={height}
                    rowCount={data.length}
                    rowGetter={({index}) => { return data[index]; }}
                    rowHeight={itemHeight}
                    width={width}
                >
                    <FlexColumn
                        dataKey='bucketSize'
                        flexGrow={1}
                        label='bucketSize'
                        width={100}
                    />
                    <FlexColumn
                        dataKey='sym'
                        flexGrow={1}
                        label='sym'
                        width={100}
                    />
                    <FlexColumn
                        dataKey='time'
                        flexGrow={1}
                        label='time'
                        width={100}
                    />
                    <FlexColumn
                        dataKey='ask'
                        flexGrow={1}
                        label='ask'
                        width={100}
                    />
                    <FlexColumn
                        dataKey='asize'
                        flexGrow={1}
                        label='asize'
                        width={100}
                    />
                    <FlexColumn
                        dataKey='bid'
                        flexGrow={1}
                        label='bid'
                        width={100}
                    />
                    <FlexColumn
                        dataKey='bsize'
                        flexGrow={1}
                        label='bsize'
                        width={100}
                    />
                </FlexTable>
            }}
        </AutoSizer>
    </div>
    

    Nothing out of ordinary.

    However, when you scroll the table, there is a considerable lag/ jitter. Upon further inspection, Grid component is spending loads of time for each scroll event.

    15-06-2016 15-27-30

    It looks like with addition of every column table scroll performance drops in half. With 22 columns, the table scroll becomes virtually unusable.

    In comparison, our simple react-virtual-list implementation scales to hundreds of columns without any noticeable performance impact.

    I have attached a CPU profile log.

    CPU-20160615T154350.zip

    performance 
    opened by gajus 40
  • MultiGrid feedback

    MultiGrid feedback

    What is MultiGrid?

    1. It's an attempt to stitch together the scroll position of multiple Grid components in such a way as to reduce the amount of lag between Grids when scrolling.
    2. It's also an attempt reduce the amount of code/complexity required to setup a fixed header/column UI.

    Still wondering what the heck am I talking about? ~~Check out the demo here.~~ Edit: The online demo has been overridden by a recent release. It will become available again at some point but in the meanwhile you will have to checkout the branch and run it locally.

    How can I test it?

    To test this build, install react-virtualized next:

    npm install react-virtualized@next
    

    Known Issues

    The following are the only known issues for this PR. (If you have ideas about how to address them- please chip in! I need your help!)

    • [ ] When scrollbars are visible, the horizontal scrollbar for bottom-right Grid is hidden unless you scroll to the very bottom. If I'm not able to find a workaround for this feature I could rewrite MultiGrid to use ScrollSync internally. This would still provide a simpler API to users wanting basic fixed columns/rows. However it would lose some of the super-smooth vertical scrolling currently offered by the component.
    opened by bvaughn 39
  • React Virtualized is not displaying in Antd Version 5

    React Virtualized is not displaying in Antd Version 5

    Bug Report

    I'm currently using Antd Version 4 and react-virtualized in project. When I upgrade to Antd version 5 react-virtualized is not working

    What is the current behavior?

    React-virtualized is not displaying in Antd version 5.

    What is the expected behavior?

    Which versions of React and react-virtualized, and which browser / OS are affected by this issue? Did this work in previous versions of react-virtualized?

    | | | |-------------------|----------| | Browser | chrome | | OS | windows | | React | 16.4 | | React DOM | 16.14 | | react-virtualized | 9.22.3 |

    opened by Khadhiri786 0
  • 9.22.3 not support react17

    9.22.3 not support react17

    this is package.json from v9.22.3 ,installed by npm. npm registry is: https://registry.npmjs.org/

      "peerDependencies": {
        "react": "^15.3.0 || ^16.0.0-alpha",
        "react-dom": "^15.3.0 || ^16.0.0-alpha"
      },
    

    package.json

    {
      "name": "react-virtualized",
      "description": "React components for efficiently rendering large, scrollable lists and tabular data",
      "author": "Brian Vaughn <[email protected]>",
      "user": "bvaughn",
      "version": "9.22.3",
      "homepage": "https://github.com/bvaughn/react-virtualized",
      "main": "dist/commonjs/index.js",
      "module": "dist/es/index.js",
      "jsnext:main": "dist/es/index.js",
      "license": "MIT",
      "scripts": {
        "build:types": "flow-copy-source --ignore \"**/*.{jest,e2e,ssr,example}.js\" source/WindowScroller dist/es/WindowScroller && flow-copy-source --ignore \"**/*.{jest,e2e,ssr,example}.js\" source/AutoSizer dist/es/AutoSizer",
        "build": "yarn run build:commonjs && yarn run build:css && yarn run build:es && yarn run build:demo && yarn run build:umd",
        "build:commonjs": "yarn run clean:commonjs && cross-env NODE_ENV=commonjs babel source --out-dir dist/commonjs",
        "build:css": "postcss source/styles.css -o styles.css --use autoprefixer",
        "build:demo": "yarn run clean:demo && cross-env NODE_ENV=production webpack --config webpack.config.demo.js -p --bail",
        "build:es": "yarn run clean:es && yarn run build:types && cross-env NODE_ENV=es babel source --out-dir dist/es",
        "build:umd": "yarn run clean:umd && cross-env NODE_ENV=rollup rollup -c",
        "clean": "yarn run clean:commonjs && yarn run clean:demo && yarn run clean:es && yarn run clean:umd",
        "clean:commonjs": "rimraf dist/commonjs",
        "clean:demo": "rimraf build",
        "clean:es": "rimraf dist/es",
        "clean:umd": "rimraf dist/umd",
        "deploy": "gh-pages -d build",
        "lint": "eslint 'source/**/*.js'",
        "typecheck": "flow check",
        "prettier": "prettier --write '{playground,source,docs}/**/*.{js,md}'",
        "prettier:diff": "prettier --list-different '{playground,source,docs}/**/*.{js,md}'",
        "postpublish": "yarn run deploy",
        "prepublishOnly": "yarn run build",
        "start": "cross-env NODE_ENV=development webpack-dev-server --hot --config webpack.config.dev.js",
        "test": "yarn run test:jest",
        "test:jest": "jest --no-watchman --runInBand",
        "test:coverage": "jest --no-watchman --maxWorkers 2 --coverage && codecov",
        "watch": "watch 'clear && yarn run test -s' source",
        "watch:jest": "jest --no-watchman --watch"
      },
      "husky": {
        "hooks": {
          "pre-commit": "pretty-quick --staged"
        }
      },
      "files": [
        "dist",
        "styles.css"
      ],
      "repository": {
        "type": "git",
        "url": "https://github.com/bvaughn/react-virtualized.git"
      },
      "keywords": [
        "react",
        "reactjs",
        "react-component",
        "virtual",
        "list",
        "scrolling",
        "infinite",
        "virtualized",
        "table",
        "fixed",
        "header",
        "flex",
        "flexbox",
        "grid",
        "spreadsheet"
      ],
      "bugs": {
        "url": "https://github.com/bvaughn/react-virtualized/issues"
      },
      "devDependencies": {
        "@babel/cli": "^7.7.0",
        "@babel/core": "^7.7.2",
        "@babel/plugin-external-helpers": "^7.2.0",
        "@babel/plugin-proposal-class-properties": "^7.7.0",
        "@babel/plugin-transform-modules-commonjs": "^7.7.0",
        "@babel/plugin-transform-runtime": "^7.6.2",
        "@babel/polyfill": "^7.7.0",
        "@babel/preset-env": "^7.7.1",
        "@babel/preset-flow": "^7.0.0",
        "@babel/preset-react": "^7.7.0",
        "@babel/preset-stage-2": "^7.0.0",
        "autoprefixer": "^9.7.1",
        "babel-eslint": "^10.0.3",
        "babel-jest": "^24.9.0",
        "babel-loader": "8.0.6",
        "babel-plugin-flow-react-proptypes": "^26.0.0",
        "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
        "codecov": "^3.6.1",
        "codemirror": "^5.49.2",
        "cross-env": "^6.0.3",
        "css-loader": "^3.2.0",
        "eslint": "^6.6.0",
        "eslint-config-fbjs": "^3.1.1",
        "eslint-config-prettier": "^6.5.0",
        "eslint-config-react": "^1.1.7",
        "eslint-plugin-babel": "^5.3.0",
        "eslint-plugin-flowtype": "^4.3.0",
        "eslint-plugin-jsx-a11y": "^6.2.3",
        "eslint-plugin-prettier": "^3.1.1",
        "eslint-plugin-react": "^7.16.0",
        "eslint-plugin-relay": "^1.3.12",
        "extract-text-webpack-plugin": "^3.0.2",
        "file-loader": "^4.2.0",
        "flow-bin": "^0.111.3",
        "flow-copy-source": "^2.0.8",
        "gh-pages": "^2.1.1",
        "html-webpack-plugin": "^3.2.0",
        "husky": "^3.0.9",
        "immutable": "^4.0.0-rc.12",
        "jest": "^24.9.0",
        "jest-environment-puppeteer": "^4.3.0",
        "lint-staged": "^9.4.2",
        "postcss": "^7.0.21",
        "postcss-cli": "^6.1.3",
        "postcss-loader": "^3.0.0",
        "prettier": "1.19.1",
        "pretty-quick": "^2.0.1",
        "puppeteer": "^2.0.0",
        "react": "^16.11.0",
        "react-codemirror": "^1.0.0",
        "react-dom": "^16.11.0",
        "react-router": "^5.1.2",
        "react-router-dom": "^5.1.2",
        "react-test-renderer": "^16.11.0",
        "rimraf": "^3.0.0",
        "rollup": "^1.26.5",
        "rollup-plugin-babel": "^4.3.3",
        "rollup-plugin-commonjs": "^10.1.0",
        "rollup-plugin-node-resolve": "^5.2.0",
        "rollup-plugin-replace": "^2.2.0",
        "rollup-plugin-uglify": "^6.0.3",
        "style-loader": "^1.0.0",
        "watch": "^1.0.2",
        "webpack": "^4.41.2",
        "webpack-cli": "^3.3.10",
        "webpack-dev-server": "^3.9.0"
      },
      "dependencies": {
        "@babel/runtime": "^7.7.2",
        "clsx": "^1.0.4",
        "dom-helpers": "^5.1.3",
        "loose-envify": "^1.4.0",
        "prop-types": "^15.7.2",
        "react-lifecycles-compat": "^3.0.4"
      },
      "peerDependencies": {
        "react": "^15.3.0 || ^16.0.0-alpha",
        "react-dom": "^15.3.0 || ^16.0.0-alpha"
      },
      "browserify": {
        "transform": [
          "loose-envify"
        ]
      }
    }
    
    opened by calmchang 4
  • Refer to react-window in the README.md as an actively maintained alternative lib

    Refer to react-window in the README.md as an actively maintained alternative lib

    opened by mbalc 0
  • Suppress findDOMNode warning

    Suppress findDOMNode warning

    Thanks for contributing to react-virtualized!

    Before submitting a pull request, please complete the following checklist:

    • [ ] The existing test suites (npm test) all pass
    • [ ] For any new features or bug fixes, both positive and negative test cases have been added
    • [ ] For any new features, documentation has been added
    • [ ] For any documentation changes, the text has been proofread and is clear to both experienced users and beginners.
    • [ ] Format your code with prettier (yarn run prettier).
    • [ ] Run the Flow typechecks (yarn run typecheck).

    Here is a short checklist of additional things to keep in mind before submitting:

    • Please make sure your pull request description makes it very clear what you're trying to accomplish. If it's a bug fix, please also provide a failing test case (if possible). In either case, please add additional unit test coverage for your changes. :)
    • Be sure you have notifications setup so that you'll see my code review responses. (I may ask you to make some adjustments before merging.)
    opened by keepitreal 0
Releases(v9.22.3)
Owner
Brian Vaughn
React JS core team at @facebook; formerly at @treasure-data and @google.
Brian Vaughn
React-app - Building volume rendering web app with VTK.js,react & HTML Using datasets provided in vtk examples (head for surface rendering and chest for ray casting)

SBE306 Assignment 4 (VTK) data : Directory containing Head and Ankle datasets Description A 3D medical viewer built with vtk-js Team Team Name : team-

Mustafa Megahed  2 Jul 19, 2022
An interactive CLI automation tool 🛠️ for creating react.js and next.js projects most fast and efficiently. ⚛️

An interactive CLI automation tool ??️ for creating react.js and next.js projects most fast and efficiently. ⚛️ About ℹ️ ReexJs CLI is an interactive

Alexis Guzman 27 Apr 12, 2022
A simple project showing the usage of useState, useEffect and conditional rendering in React

Getting Started with Tour-sample React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can ru

Amaechi johnkingsley 1 Jul 30, 2022
A React utility belt for function components and higher-order components.

A Note from the Author (acdlite, Oct 25 2018): Hi! I created Recompose about three years ago. About a year after that, I joined the React team. Today,

Andrew Clark 14.8k Jan 4, 2023
Nextjs-components: A collection of React components

nextjs-components A collection of React components, transcribed from https://vercel.com/design. 1 Motivation Blog post from 01/09/2022 Todo's Unit tes

null 94 Nov 30, 2022
Beautiful and accessible drag and drop for lists with React

react-beautiful-dnd (rbd) Beautiful and accessible drag and drop for lists with React Play with this example if you want! Core characteristics Beautif

Atlassian 28.9k Jan 7, 2023
A collection of composable React components for building interactive data visualizations

an ecosystem of composable React components for building interactive data visualizations. Victory Contents Getting Started Victory Native API Document

Formidable 10.1k Jan 3, 2023
A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and s

Victor Dantas 9 Jun 30, 2022
This hook allows you to isolate and manage the state within the component, reducing rendering operations and keeping the source code concise.

React Hook Component State This hook allows you to isolate and manage the state within the component, reducing rendering operations and keeping the so

Yongwoo Jung 2 May 15, 2022
React components and hooks for creating VR/AR applications with @react-three/fiber

@react-three/xr React components and hooks for creating VR/AR applications with @react-three/fiber npm install @react-three/xr These demos are real,

Poimandres 1.4k Jan 4, 2023
we are make our components in story book. So if we add some components you can find document and example of useage in storybook.

we are make our components in story book. So if we add some components you can find document and example of useage in storybook.

고스락 6 Aug 12, 2022
Providing accessible components with Web Components & Material You

tiny-material Still on developing, DO NOT use for production environment Run well on Google Chrome, Firefox, Chrome for Android, Microsoft Edge (Chrom

HugePancake 11 Dec 31, 2022
Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

Kyrillos Hany 5 Mar 11, 2022
Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

null 8.7k Jan 8, 2023
A node script that lists the cities on Santa's route from santatracker.google.com

Google Santa Route A script that lists the cities on Santa's route from santatracker.google.com based on the JSON containing all Santa's destinations.

Emile Calixte 1 Dec 24, 2021
:black_medium_small_square:React Move | Beautiful, data-driven animations for React

React-Move Beautiful, data-driven animations for React. Just 3.5kb (gzipped)! Documentation and Examples Features Animate HTML, SVG & React-Native Fin

Steve Hall 6.5k Jan 1, 2023
Data Visualization Components

react-vis | Demos | Docs A COMPOSABLE VISUALIZATION SYSTEM Overview A collection of react components to render common data visualization charts, such

Uber Open Source 8.4k Jan 2, 2023
Shows how React components and Redux to build a friendly user experience with instant visual updates and scaleable code in ecommerce applications

This simple shopping cart prototype shows how React components and Redux can be used to build a friendly user experience with instant visual updates and scaleable code in ecommerce applications.

Alan Vieyra 4 Feb 1, 2022
🔄 Basic project to start studying React and Typescript. With it you can translate text to binary or morse language. This project addresses the creation of routes and components.

max-conversion Projeto criado para iniciar nos estudos de React e Typescript Basic project to gain knowledge in react Na plataforma é possível convert

Igor Neves 3 Feb 12, 2022