react-sequential-list

Render items in a list one at a time while waiting for items to call an onComplete callback. Useful for rendering lists of items that are expensive to render.

Installation

npm i react-sequential-list

Usage

import React from 'react';
import SequentialList from 'react-sequential-list';

/** Generated a random integer within the inclusive range of start and end */
function randInt(start, end) {
  const range = end + 1 - start; 
  return Math.floor(Math.random() * range) + start;
}

/** An example ListItem 
 * @info onComplete will be inserted/overriden by SequentialList */
function ListItem({ text, onComplete }) {
  const [timeLeft, setTimeLeft] = React.useState(randInt(0, 7));

  // Simulating an async task and calling onComplete once resolved
  React.useEffect(() => {
    if (timeLeft > 0) {
      setTimeout(() => setTimeLeft(seconds => seconds - 1), 1000);
    } else {
      if (onComplete) {
        onComplete();
      }
    }
  }, [onComplete, timeLeft]);

  return <li>{text}{timeLeft > 0 && `, in progress (${timeLeft})`}</li>
}

function App() {
  return (
    <ul>
      <SequentialList>
        <ListItem text="Item 1" />
        <ListItem text="Item 2" />
        <ListItem text="Item 3" />
        <ListItem text="Item 4" />
        <ListItem text="Item 5" />
        <ListItem text="Item 6" />
      </SequentialList>
    </ul>
  );
}

export default App;

Result

Use Cases

Say you have a list of images, and you want them to load one by one in order for performance reasons, you can use SequentialList to accomplish this!

Set the completionCallbackName prop of SequentialList to match the name of the callback that the <img /> component calls when it finishes loading, in this case: onLoad.

/** ProgressiveImageList
 * Displays the child images one by one until all of them are loaded in sequential order
*/
function ProgressiveImageList() {
  return (
    <SequentialList completionCallbackName="onLoad">
      <img src="insert random source" alt="random alt">
      <img src="insert random source" alt="random alt">
      <img src="insert random source" alt="random alt">
      <img src="insert random source" alt="random alt">
      <img src="insert random source" alt="random alt">
      <img src="insert random source" alt="random alt">
    </SequentialList>
  )
}