use-iterator

React hook collections for JavaScript's Iterator/generator.

useGenerator(generator, deps)

Creates a reactive state and a dispatcher from a generator function.

const result = useGenerator<string>(function* () {
  yield 'aaa';
  yield 'bbb';
  yield 'ccc';
}, []);

result.next();
result.value === 'aaa';

result.next();
result.value === 'bbb';

useAsyncGenerator(generator, deps)

Creates a reactive state and a dispatcher from a generator function. Similar to useGenerator but you can yield promise from it.

const result = useAsyncGenerator<string>(function* () {
  yield fetch('https://example.com/1').then((r) => r.json());
  yield fetch('https://example.com/2').then((r) => r.json());
  yield fetch('https://example.com/3').then((r) => r.json());
}, []);

result.next();
result.loading; // equals to true while loading
result.value; // equals to the response from the URL above

useIterable(iterable)

Creates a reactive state and a dispatcher from a iterable object.

// Argument can be anything that implements Symbol.iterator
const result = useIterable("abcd");

result.next();
result.value === 'a';

result.next();
result.value === 'b';

useAsyncIterable(asyncIterable)

Creates a reactive state and a dispatcher from a iterable object. Similar to useIterable but you can yield promise from it.

// Argument can be anything that can be used with for-await-of syntax
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of
const result = useAsyncIterable({
  [Symbol.asyncIterator]() {
    return {
      i: 0,
      next() {
        if (this.i < 3) {
          return Promise.resolve({ value: this.i++, done: false });
        }

        return Promise.resolve({ done: true });
      }
    };
  }
});

result.next();
result.loading; // equals to true while loading
result.value === 1;

useIterator(iterator)

A low-level hook for useIterable and useGenerator. Accepts iterator object and returns a reactive state and a dispatcher.

const result = useIterator({
  next: () {...},
  return: () {...},
  throw: () {...},
});

useAsyncIterator(iterator)

A low-level hook for useAsyncIterable and useAsyncGenerator. Accepts async iterator object and returns a reactive state and a dispatcher.

const result = useAsyncIterator({
  next: () {...},
  return: () {...},
  throw: () {...},
});

GitHub

https://github.com/neet/use-iterator