How to use the react-window.shouldComponentUpdate.bind function in react-window

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 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 6 months ago

Package Health Score

80 / 100
Full package analysis