How to use react-window - 3 common examples

To help you get started, we’ve selected a few react-window examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github bvaughn / react-window / website / src / routes / examples / FixedSizeList.js View on Github external
import React, { Component } from 'react';
import { FixedSizeList, shouldComponentUpdate } from 'react-window';
import CodeBlock from '../../components/CodeBlock';
import ProfiledExample from '../../components/ProfiledExample';

import CODE_HORIZONTAL from '../../code/FixedSizeListHorizontal.js';
import CODE_VERTICAL from '../../code/FixedSizeListVertical.js';

import styles from './shared.module.css';

class Item extends Component {
  // Ignore changes in style wrapper Object.
  shouldComponentUpdate = shouldComponentUpdate.bind(this);

  render() {
    const { data, index, style } = this.props;

    return (
      <div style="{style}">
        {data} {index}
      </div>
    );
  }
}

export default function() {
github esnet / react-dynamic-forms / packages / react-dynamic-forms / lib / components / AsyncChooser.js View on Github external
//console.log('Inside MenuList:');

            var _props = this.props,
                options = _props.options,
                children = _props.children,
                maxHeight = _props.maxHeight,
                getValue = _props.getValue;

            var _getValue = getValue(),
                _getValue2 = _slicedToArray(_getValue, 1),
                value = _getValue2[0];

            var initialOffset = options.indexOf(value) * height;

            return _react2.default.createElement(
                _reactWindow.FixedSizeList,
                {
                    height: maxHeight,
                    itemCount: children.length,
                    itemSize: 50,
                    initialScrollOffset: initialOffset },
                function (_ref) {
                    var index = _ref.index,
                        style = _ref.style;
                    return _react2.default.createElement(
                        "div",
                        { style: style },
                        children[index]
                    );
                }
            );
        }
github veritone / veritone-sdk / packages / veritone-react-common / src / components / PDFViewer / SimplePDFViewer.js View on Github external
);
  }
}

class PageRow extends Component {
  static propTypes = {
    index: number,
    style: shape(),
    data: shape({
      scale: number,
      searchText: string,
      customTextRenderer: func
    })
  };

  shouldComponentUpdate = shouldComponentUpdate.bind(this);

  render() {
    const { index, style, data } = this.props;
    const { scale, customTextRenderer, searchText } = data;
    const key = customTextRenderer
      ? `custom_${searchText}`
      : `default_${index}`;
    return (
      <div style="{style}">
        </div>

react-window

React components for efficiently rendering large, scrollable lists and tabular data

MIT
Latest version published 5 days ago

Package Health Score

91 / 100
Full package analysis