⚗️ [useVurttle] Experiment with throttle hook

[beefchimi]

I am now exporting useTimeout() and useVurttle() hooks.

The idea of useVurttle() is something like this:

export function MyComponent() {
  const {listRef, listWidth, listHeight, virtualItems, updateItemHeight} = useVurtis({
    count: 20,
    minWidth: 100,
    gap: 10,
  });

  // Will flip back-and-forth between `true/false` during resize operations.
  // When `true`, you can refrain from additional computations - such as animations.
  const pending = useVurttle(listWidth);

  const itemsMarkup = virtualItems.map(
    ({order, top, left, width, height}, index) => {
      return (
        <li
          key={`Item-${order}`}
          ref={index === 0 ? updateItemHeight : undefined}
          style={{top, left, width}}
        >
          <span>{order}</span>
        </li>
      );
    },
  );

  return (
    <div>
      <p>Pending: {pending.toString()}</p>

      <ul ref={listRef} style={{height: listHeight}}>
        {itemsMarkup}
      </ul>
    </div>
  );
}

[changeset-bot]

🦋 Changeset detected

Latest commit: bcdcc19

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
vurtis	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR