React Util

A few useful React hooks and components.

Contents

• Components
  • <If>
  • <IfElse>
  • <While>
  • <ForEach>
  • <ForRange>
  • <Repeat>
• Hooks
  • useForceUpdate
  • useTimeout
  • useInterval
  • useEphemeral
  • usePromise
  • useIterator
  • useIterable
  • useGenerator

Components

<If>

Only displays the children if the condition is true.

<If condition={boolean}>
  <span>Hello!</span>
  <span>The condition is true</span>
</If>

<IfElse>

Displays the first child if the condition is true, otherwise displays the second one.

<IfElse condition={boolean}>
  <>
    <span>Hello!</span>
    <span>The condition is true</span>
  </>
  <>
    <span>Goodbye!</span>
    <span>The condition is false</span>
  </>
</IfElse>

<While>

Repeats the children until the condition is false.

<While condition={() => Math.random() > 0.5}>
  <span>Hello</span>
  <span>World!</span>
</While>

<ForEach>

Maps each value in an iterable to an element.

<ForEach for={users} key={user => user.id} each={user => <span>{user.name}</span>} />

<ForRange>

Emulates a numeric for loop.

<ForRange range={[0, 10]} each={i => <span>{i}</span>} />

<Repeat>

Repeats the children a set amount of times.

<Repeat for={5}>
  <span>This text will be rendered 5 times.</span>
  <span>This one too</span>
</Repeat>

Hooks

useForceUpdate

Forces the component to update.

const forceUpdate = useForceUpdate();
forceUpdate();

useTimeout

Creates a timeout that is cancelled when the component is unmounted.
3rd arg is the dependency list.

useTimeout(() => {
  console.log("1 second timeout");
}, 1000, []);

useInterval

Works the same way as useTimeout, but using an interval instead.

useInterval(() => {
  console.log("1 second interval");
}, 1000, []);

useEphemeral

Creates an effect that is disabled after the specified duration.
Using a negative duration never disables the effect.

useEphemeral(10000, () => {
  // this effect will be disabled after 10 seconds
  return () => {};
}, []);

usePromise

Rerenders the component once the promise has been resolved/rejected.

const res = usePromise(() => fetch(url).then(res => res.json()));
if (res.state == "resolved") {
  const value = res.value;
} else if (res.state == "rejected") {
  const error = res.error;
} else if (res.state == "pending") {
  
}

useIterator

Returns the current value and a next function.
Calling the next function triggers a rerender.

const [value, next] = useIterator(function*() {
  yield 1;
  yield 2;
  yield 3;
}());

useIterable

Alias for useIterator(iterable[Symbol.iterator]()).

const [value, next] = useIterable([1, 2, 3]);

useGenerator

Alias for useIterator(generator()).

const [value, next] = useGenerator(function*() {
  yield 1;
  yield 2;
  yield 3;
});