Examples

Examples use:

Minimal usage

Cardwindow works by only rendering part of a large data set (just enough to fill the viewport). This helps address some common performance bottlenecks:

It reduces the amount of work (and time) required to render the initial view and to process updates.
It reduces the memory footprint by avoiding over-allocation of DOM nodes.

Live Editor

function App() {
  const data = range(10000);
  const cardRect = { width: 200, height: 120 };
  return (
    <div style={{ height: 300 }}>
      <CardWindow data={data} cardRect={cardRect}>
        {SampleCard}
      </CardWindow>
    </div>
  );
}

function App() {
  const data = range(10000);
  const cardRect = { width: 200, height: 120 };
  return (
    <div style={{ height: 300 }}>
      <CardWindow data={data} cardRect={cardRect}>
        {SampleCard}
      </CardWindow>
    </div>
  );
}

Result

Required properties

CardWindow has three required properties. The Type parameter is T extends any[].

Name	Type
`cardRect`	`Rect`	`cardRect` is used to calculate the rendering of `CardWindow.children` component.
`children`	`React.ComponentType`<`CardProps`<`T`>>	`children` is a component that receives `CardProps<T>`.
`data`	`T`	`data` is an array. CardWindow passes data to `CardWindow.children` component.

Styling

`root`

root is passed to the root element of CardWindow. By default, root.style has these attributes:

width: 100%
height: 100%
minWidth: cardRect.width
overflow: auto

You can't override only { overflow: 'auto' }.

Live Editor

function App() {
  const data = range(100);
  const cardRect = { width: 200, height: 120 };
  const root = { style: { height: 300, border: '10px dashed #2196f3' } };
  return (
    <CardWindow data={data} cardRect={cardRect} root={root}>
      {SampleCard}
    </CardWindow>
  );
}

function App() {
  const data = range(100);
  const cardRect = { width: 200, height: 120 };
  const root = { style: { height: 300, border: '10px dashed #2196f3' } };
  return (
    <CardWindow data={data} cardRect={cardRect} root={root}>
      {SampleCard}
    </CardWindow>
  );
}

Result

`container`

container is passed to the scrollable large container element. You can't override width and height.

Live Editor

function App() {
  const data = range(100);
  const cardRect = { width: 200, height: 120 };
  const container = { style: { background: 'linear-gradient(65deg, #F13F79, #2196f3)' } };
  return (
    <div style={{ height: 300 }}>
      <CardWindow data={data} cardRect={cardRect} container={container}>
        {SampleCard}
      </CardWindow>
    </div>
  );
}

function App() {
  const data = range(100);
  const cardRect = { width: 200, height: 120 };
  const container = { style: { background: 'linear-gradient(65deg, #F13F79, #2196f3)' } };
  return (
    <div style={{ height: 300 }}>
      <CardWindow data={data} cardRect={cardRect} container={container}>
        {SampleCard}
      </CardWindow>
    </div>
  );
}

Result

Card Positions

For card positions, you can use justifyContent, lastRowAlign and spacing.

Live Editor

function App() {
  const [justifyContent, JustifyContentDropdown] = useDropdown(
    'justifyContent',
    ['left', 'right', 'center', 'space-around', 'space-between', 'space-evenly', 'stretch'],
    5
  );
  const [lastRowAlign, LastRowAlignDropdown] = useDropdown('lastRowAlign', ['left', 'right', 'inherit'], 0);
  const spaceList = [0, 4, 8, 20, 50, 100];
    const [x, XDropdown] = useDropdown('x', spaceList, 2);
  const [y, YDropdown] = useDropdown('y', spaceList, 2);
  const [top, TopDropdown] = useDropdown('top', spaceList, 2);
  const [bottom, BottomDropdown] = useDropdown('bottom', spaceList, 2);
  const [left, LeftDropdown] = useDropdown('left', spaceList, 2);
  const [right, RightDropdown] = useDropdown('right', spaceList, 2);
  const data = range(10);
  const cardRect = { width: 200, height: 120 };
  const spacing = { x, y, top, bottom, left, right };
  const props = { data, cardRect, justifyContent, lastRowAlign, spacing };
  return (
    <div>
      <Navbar>
        {JustifyContentDropdown}
        {LastRowAlignDropdown}
      </Navbar>
      <Navbar>
        <p className="navbar__item">spacing:</p>
        {XDropdown}
        {YDropdown}
        {TopDropdown}
        {BottomDropdown}
        {LeftDropdown}
        {RightDropdown}
      </Navbar>
      <div style={{ height: 400 }}>
        <CardWindow {...props}>{SampleCard}</CardWindow>
      </div>
    </div>
  );
}

function App() {
  const [justifyContent, JustifyContentDropdown] = useDropdown(
    'justifyContent',
    ['left', 'right', 'center', 'space-around', 'space-between', 'space-evenly', 'stretch'],
    5
  );
  const [lastRowAlign, LastRowAlignDropdown] = useDropdown('lastRowAlign', ['left', 'right', 'inherit'], 0);
  const spaceList = [0, 4, 8, 20, 50, 100];
    const [x, XDropdown] = useDropdown('x', spaceList, 2);
  const [y, YDropdown] = useDropdown('y', spaceList, 2);
  const [top, TopDropdown] = useDropdown('top', spaceList, 2);
  const [bottom, BottomDropdown] = useDropdown('bottom', spaceList, 2);
  const [left, LeftDropdown] = useDropdown('left', spaceList, 2);
  const [right, RightDropdown] = useDropdown('right', spaceList, 2);
  const data = range(10);
  const cardRect = { width: 200, height: 120 };
  const spacing = { x, y, top, bottom, left, right };
  const props = { data, cardRect, justifyContent, lastRowAlign, spacing };
  return (
    <div>
      <Navbar>
        {JustifyContentDropdown}
        {LastRowAlignDropdown}
      </Navbar>
      <Navbar>
        <p className="navbar__item">spacing:</p>
        {XDropdown}
        {YDropdown}
        {TopDropdown}
        {BottomDropdown}
        {LeftDropdown}
        {RightDropdown}
      </Navbar>
      <div style={{ height: 400 }}>
        <CardWindow {...props}>{SampleCard}</CardWindow>
      </div>
    </div>
  );
}

Result

Columns

Automatically Adjust Columns

The CardWindow uses ResizeObserver internally. Therefore, the column is automatically adjusted according to the element size specified by CSS.

Live Editor

function App() {
  const [width, Tabs] = useTabs(['100%', '75%', '50%']);
  const data = range(10000);
  const cardRect = { width: 200, height: 120 };
  return (
    <div>
      {Tabs}
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <div style={{ width, height: 300 }}>
          <CardWindow data={data} cardRect={cardRect}>
            {SampleCard}
          </CardWindow>
        </div>
      </div>
    </div>
  );
}

function App() {
  const [width, Tabs] = useTabs(['100%', '75%', '50%']);
  const data = range(10000);
  const cardRect = { width: 200, height: 120 };
  return (
    <div>
      {Tabs}
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <div style={{ width, height: 300 }}>
          <CardWindow data={data} cardRect={cardRect}>
            {SampleCard}
          </CardWindow>
        </div>
      </div>
    </div>
  );
}

Result

Max columns

You can set the maximum number of columns. The maxCols is a prop that goes well with justifyContent="stretch".

Live Editor

function App() {
  const [maxCols, Dropdown] = useDropdown('Max columns', [1, 2, 3, 4, 5], 2);
  const data = range(100);
  const cardRect = { width: 200, height: 120 };
  return (
    <div>
      <Navbar>{Dropdown}</Navbar>
      <div style={{ height: 300 }}>
        <CardWindow data={data} cardRect={cardRect} justifyContent="stretch" maxCols={maxCols}>
          {SampleCard}
        </CardWindow>
      </div>
    </div>
  );
}

function App() {
  const [maxCols, Dropdown] = useDropdown('Max columns', [1, 2, 3, 4, 5], 2);
  const data = range(100);
  const cardRect = { width: 200, height: 120 };
  return (
    <div>
      <Navbar>{Dropdown}</Navbar>
      <div style={{ height: 300 }}>
        <CardWindow data={data} cardRect={cardRect} justifyContent="stretch" maxCols={maxCols}>
          {SampleCard}
        </CardWindow>
      </div>
    </div>
  );
}

Result

Overscanning

The overScanPx to render outside of the visible area. This property can be important for two reasons:

Overscanning by one row or column allows the tab key to focus on the next (not yet visible) item.
Overscanning slightly can reduce or prevent a flash of empty space when a user first starts scrolling.

Note that overscanning too much can negatively impact performance. By default, CardWindow overscans by 200 px.

Please check the Elements in the browser console. By default, this sample render 24 or less cards.

Live Editor

function App() {
  const [overScanPx, OverScanPxDropdown] = useDropdown('overScanPx', [0, 200, 1000, 2000], 1);
  const data = range(100);
  const cardRect = { width: 200, height: 120 };
  const props = { data, cardRect, overScanPx };
  return (
    <div>
      <Navbar>{OverScanPxDropdown}</Navbar>
      <div style={{ height: 200 }}>
        <CardWindow {...props}>{SampleCard}</CardWindow>
      </div>
    </div>
  );
}

function App() {
  const [overScanPx, OverScanPxDropdown] = useDropdown('overScanPx', [0, 200, 1000, 2000], 1);
  const data = range(100);
  const cardRect = { width: 200, height: 120 };
  const props = { data, cardRect, overScanPx };
  return (
    <div>
      <Navbar>{OverScanPxDropdown}</Navbar>
      <div style={{ height: 200 }}>
        <CardWindow {...props}>{SampleCard}</CardWindow>
      </div>
    </div>
  );
}

Result

Scroll Event

Please scroll and check the logs in the browser console.

Live Editor

function App() {
  const data = range(10000);
  const cardRect = { width: 200, height: 120 };
  const handleScroll = (e) => console.log(e.indexesOfVisible);
  return (
    <div style={{ height: 300 }}>
      <CardWindow data={data} cardRect={cardRect} onScroll={handleScroll}>
        {SampleCard}
      </CardWindow>
    </div>
  );
}

function App() {
  const data = range(10000);
  const cardRect = { width: 200, height: 120 };
  const handleScroll = (e) => console.log(e.indexesOfVisible);
  return (
    <div style={{ height: 300 }}>
      <CardWindow data={data} cardRect={cardRect} onScroll={handleScroll}>
        {SampleCard}
      </CardWindow>
    </div>
  );
}

Result

Infinite loading

You need to manage the pending status. Set the loadMore function only if you can call it.

The loading prop has 2 types, card and row.

type: `card`

Live Editor

function App() {
  const [{ data, pending }, set] = React.useState({ data: range(10), pending: false });

  React.useEffect(() => {
    const loaded = () => set((state) => ({ data: range(state.data.length + 10), pending: false }));
    let timer = undefined;
    if (pending) {
      timer = window.setTimeout(loaded, 2000);
    }
    return () => {
      if (timer !== undefined) window.clearTimeout(timer);
    };
  }, [pending]);

  const cardRect = { width: 200, height: 120 };
  const next = data.length < 100;
  // Set the loadMore function only if you can call it.
  const loadMore = !pending ? () => set({ data, pending: true }) : undefined;
  const loading = next ? { type: 'card', LoadingComponent, loadMore } : undefined;
  return (
    <div style={{ height: 300 }}>
      <CardWindow data={data} cardRect={cardRect} loading={loading}>
        {SampleCard}
      </CardWindow>
    </div>
  );
}

function App() {
  const [{ data, pending }, set] = React.useState({ data: range(10), pending: false });

  React.useEffect(() => {
    const loaded = () => set((state) => ({ data: range(state.data.length + 10), pending: false }));
    let timer = undefined;
    if (pending) {
      timer = window.setTimeout(loaded, 2000);
    }
    return () => {
      if (timer !== undefined) window.clearTimeout(timer);
    };
  }, [pending]);

  const cardRect = { width: 200, height: 120 };
  const next = data.length < 100;
  // Set the loadMore function only if you can call it.
  const loadMore = !pending ? () => set({ data, pending: true }) : undefined;
  const loading = next ? { type: 'card', LoadingComponent, loadMore } : undefined;
  return (
    <div style={{ height: 300 }}>
      <CardWindow data={data} cardRect={cardRect} loading={loading}>
        {SampleCard}
      </CardWindow>
    </div>
  );
}

Result

type: `row`

Component height is required for row type loading.

Live Editor

function App() {
  const [{ data, pending }, set] = React.useState({ data: range(10), pending: false });

  React.useEffect(() => {
    const loaded = () => set((state) => ({ data: range(state.data.length + 10), pending: false }));
    let timer = undefined;
    if (pending) {
      timer = window.setTimeout(loaded, 2000);
    }
    return () => {
      if (timer !== undefined) window.clearTimeout(timer);
    };
  }, [pending]);

  const cardRect = { width: 200, height: 120 };
  const next = data.length < 100;
  // Set the loadMore function only if you can call it.
  const loadMore = !pending ? () => set({ data, pending: true }) : undefined;
  const loading = next ? { type: 'row', LoadingComponent, height: 80, loadMore } : undefined;
  return (
    <div style={{ height: 300 }}>
      <CardWindow data={data} cardRect={cardRect} loading={loading}>
        {SampleCard}
      </CardWindow>
    </div>
  );
}

function App() {
  const [{ data, pending }, set] = React.useState({ data: range(10), pending: false });

  React.useEffect(() => {
    const loaded = () => set((state) => ({ data: range(state.data.length + 10), pending: false }));
    let timer = undefined;
    if (pending) {
      timer = window.setTimeout(loaded, 2000);
    }
    return () => {
      if (timer !== undefined) window.clearTimeout(timer);
    };
  }, [pending]);

  const cardRect = { width: 200, height: 120 };
  const next = data.length < 100;
  // Set the loadMore function only if you can call it.
  const loadMore = !pending ? () => set({ data, pending: true }) : undefined;
  const loading = next ? { type: 'row', LoadingComponent, height: 80, loadMore } : undefined;
  return (
    <div style={{ height: 300 }}>
      <CardWindow data={data} cardRect={cardRect} loading={loading}>
        {SampleCard}
      </CardWindow>
    </div>
  );
}

Result

Examples

Minimal usage​

Required properties​

Styling​

root​

container​

Card Positions​

Columns​

Automatically Adjust Columns​

Max columns​

Overscanning​

Scroll Event​

Infinite loading​

type: card​

type: row​

Minimal usage

Required properties

Styling

`root`

`container`

Card Positions

Columns

Automatically Adjust Columns

Max columns

Overscanning

Scroll Event

Infinite loading

type: `card`

type: `row`