Imported Code Sandbox examples into GitHub

example/sandboxes/fixed-size-grid/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { FixedSizeGrid as Grid } from 'react-window';
+
+import './styles.css';
+
+const App = () => (
+  <Grid
+    className="Grid"
+    columnCount={1000}
+    columnWidth={100}
+    height={150}
+    rowCount={1000}
+    rowHeight={35}
+    width={300}
+  >
+    {({ columnIndex, key, rowIndex, style }) => (
+      <div
+        className={
+          columnIndex % 2
+            ? rowIndex % 2 === 0
+              ? 'GridItemOdd'
+              : 'GridItemEven'
+            : rowIndex % 2
+              ? 'GridItemOdd'
+              : 'GridItemEven'
+        }
+        key={key}
+        style={style}
+      >
+        r{rowIndex}, c{columnIndex}
+      </div>
+    )}
+  </Grid>
+);
+
+ReactDOM.render(<App />, document.getElementById('root'));

example/sandboxes/fixed-size-grid/package.json

@@ -0,0 +1,9 @@
+{
+  "description": "Demo of react-window FixedSizeGrid",
+  "main": "src/index.js",
+  "dependencies": {
+    "react": "^16",
+    "react-dom": "^16",
+    "react-window": "alpha"
+  }
+}

example/sandboxes/fixed-size-grid/styles.css

@@ -0,0 +1,19 @@
+html {
+  font-family: sans-serif;
+  font-size: 12px;
+}
+
+.Grid {
+  border: 1px solid #d9dddd;
+}
+
+.GridItemEven,
+.GridItemOdd {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.GridItemEven {
+  background-color: #f8f8f0;
+}

example/sandboxes/fixed-size-list-horizontal/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { FixedSizeList as List } from 'react-window';
+
+import './styles.css';
+
+const App = () => (
+  <List
+    className="List"
+    direction="horizontal"
+    height={75}
+    itemCount={1000}
+    itemSize={100}
+    width={300}
+  >
+    {({ key, index, style }) => (
+      <div
+        className={index % 2 ? 'ListItemOdd' : 'ListItemEven'}
+        key={key}
+        style={style}
+      >
+        Column {index}
+      </div>
+    )}
+  </List>
+);
+
+ReactDOM.render(<App />, document.getElementById('root'));

example/sandboxes/fixed-size-list-horizontal/package.json

@@ -0,0 +1,9 @@
+{
+  "description": "Demo of react-window horizontal FixedSizeList",
+  "main": "src/index.js",
+  "dependencies": {
+    "react": "^16",
+    "react-dom": "^16",
+    "react-window": "alpha"
+  }
+}

example/sandboxes/fixed-size-list-horizontal/styles.css

@@ -0,0 +1,19 @@
+html {
+  font-family: sans-serif;
+  font-size: 12px;
+}
+
+.List {
+  border: 1px solid #d9dddd;
+}
+
+.ListItemEven,
+.ListItemOdd {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ListItemEven {
+  background-color: #f8f8f0;
+}

example/sandboxes/fixed-size-list-vertical/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { FixedSizeList as List } from 'react-window';
+
+import './styles.css';
+
+const App = () => (
+  <List
+    className="List"
+    height={150}
+    itemCount={1000}
+    itemSize={35}
+    width={300}
+  >
+    {({ key, index, style }) => (
+      <div
+        className={index % 2 ? 'ListItemOdd' : 'ListItemEven'}
+        key={key}
+        style={style}
+      >
+        Row {index}
+      </div>
+    )}
+  </List>
+);
+
+ReactDOM.render(<App />, document.getElementById('root'));

example/sandboxes/fixed-size-list-vertical/package.json

@@ -0,0 +1,9 @@
+{
+  "description": "Demo of react-window vertical FixedSizeList",
+  "main": "src/index.js",
+  "dependencies": {
+    "react": "^16",
+    "react-dom": "^16",
+    "react-window": "alpha"
+  }
+}

example/sandboxes/fixed-size-list-vertical/styles.css

@@ -0,0 +1,19 @@
+html {
+  font-family: sans-serif;
+  font-size: 12px;
+}
+
+.List {
+  border: 1px solid #d9dddd;
+}
+
+.ListItemEven,
+.ListItemOdd {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ListItemEven {
+  background-color: #f8f8f0;
+}

example/sandboxes/scrolling-indicators/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { FixedSizeList as List } from 'react-window';
+
+import './styles.css';
+
+const App = () => (
+  <List
+    className="List"
+    height={150}
+    itemCount={1000}
+    itemSize={35}
+    useIsScrolling
+    width={300}
+  >
+    {({ key, index, isScrolling, style }) => (
+      <div
+        className={index % 2 ? 'ListItemOdd' : 'ListItemEven'}
+        key={key}
+        style={style}
+      >
+        {isScrolling ? 'Scrolling' : `Row ${index}`}
+      </div>
+    )}
+  </List>
+);
+
+ReactDOM.render(<App />, document.getElementById('root'));

example/sandboxes/scrolling-indicators/package.json

@@ -0,0 +1,9 @@
+{
+  "description": "Demo of react-window scrolling indicators",
+  "main": "src/index.js",
+  "dependencies": {
+    "react": "^16",
+    "react-dom": "^16",
+    "react-window": "alpha"
+  }
+}

example/sandboxes/scrolling-indicators/styles.css

@@ -0,0 +1,19 @@
+html {
+  font-family: sans-serif;
+  font-size: 12px;
+}
+
+.List {
+  border: 1px solid #d9dddd;
+}
+
+.ListItemEven,
+.ListItemOdd {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ListItemEven {
+  background-color: #f8f8f0;
+}

example/sandboxes/scrolling-to-a-grid-item/index.js

@@ -0,0 +1,103 @@
+import React, { Component, Fragment } from 'react';
+import ReactDOM from 'react-dom';
+import { FixedSizeGrid as Grid } from 'react-window';
+
+import './styles.css';
+
+class App extends Component {
+  gridRef = React.createRef();
+
+  render() {
+    return (
+      <Fragment>
+        <div>
+          <button
+            className="ExampleButton"
+            onClick={this.scrollToRow100Column50Auto}
+          >
+            Scroll to row 100, column 50 (align: auto)
+          </button>
+          <button
+            className="ExampleButton"
+            onClick={this.scrollToRow300Column150Start}
+          >
+            Scroll to row 300, column 150 (align: start)
+          </button>
+          <button
+            className="ExampleButton"
+            onClick={this.scrollToRow350Column200End}
+          >
+            Scroll to row 350, column 200 (align: end)
+          </button>
+          <button
+            className="ExampleButton"
+            onClick={this.scrollToRow200Column100Center}
+          >
+            Scroll to row 200, column 100 (align: center)
+          </button>
+        </div>
+        <Grid
+          className="Grid"
+          columnCount={1000}
+          columnWidth={100}
+          height={150}
+          ref={this.gridRef}
+          rowCount={1000}
+          rowHeight={35}
+          width={300}
+        >
+          {({ columnIndex, key, rowIndex, style }) => (
+            <div
+              className={
+                columnIndex % 2
+                  ? rowIndex % 2 === 0
+                    ? 'GridItemOdd'
+                    : 'GridItemEven'
+                  : rowIndex % 2
+                    ? 'GridItemOdd'
+                    : 'GridItemEven'
+              }
+              key={key}
+              style={style}
+            >
+              r{rowIndex}, c{columnIndex}
+            </div>
+          )}
+        </Grid>
+      </Fragment>
+    );
+  }
+
+  scrollToRow100Column50Auto = () => {
+    this.gridRef.current.scrollToItem({
+      columnIndex: 50,
+      rowIndex: 100,
+    });
+  };
+
+  scrollToRow300Column150Start = () => {
+    this.gridRef.current.scrollToItem({
+      align: 'start',
+      columnIndex: 150,
+      rowIndex: 300,
+    });
+  };
+
+  scrollToRow350Column200End = () => {
+    this.gridRef.current.scrollToItem({
+      align: 'end',
+      columnIndex: 350,
+      rowIndex: 200,
+    });
+  };
+
+  scrollToRow200Column100Center = () => {
+    this.gridRef.current.scrollToItem({
+      align: 'center',
+      columnIndex: 200,
+      rowIndex: 100,
+    });
+  };
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));

example/sandboxes/scrolling-to-a-grid-item/package.json

@@ -0,0 +1,9 @@
+{
+  "description": "Demo of react-window scrolling to a grid item",
+  "main": "src/index.js",
+  "dependencies": {
+    "react": "^16",
+    "react-dom": "^16",
+    "react-window": "alpha"
+  }
+}

example/sandboxes/scrolling-to-a-grid-item/styles.css

@@ -0,0 +1,19 @@
+html {
+  font-family: sans-serif;
+  font-size: 12px;
+}
+
+.Grid {
+  border: 1px solid #d9dddd;
+}
+
+.GridItemEven,
+.GridItemOdd {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.GridItemEven {
+  background-color: #f8f8f0;
+}