@ilokesto/utilinent

@ilokesto/utilinent is a React utility library for rendering logic that keeps showing up in ordinary components: conditional branches, collection rendering, async mounting, visibility-based loading, slot composition, and proxy-backed variants.

The package is easiest to understand if you do not think of it as a state library or a styling library. It is a rendering-logic library. Its job is to give repeated JSX control-flow patterns names.

What the package contains

Rendering primitives like Show, Switch, Match, For, Repeat, Mount, and OptionalWrapper
Visibility helpers like Observer, Slacker, and useIntersectionObserver
Composition helpers like Slot and Slottable
Extension machinery like createProxy, PluginManager, and exported helper types

What it is not

It is not a state-management library.
It is not a styling system.
It is not a data-fetching abstraction.
It does not replace ordinary React components when plain JSX is already clear enough.

Root import model

The package exports everything from the root entrypoint. There are no subpath exports in package.json, so the default learning path should start from root imports.

npm install @ilokesto/utilinent

import { For, Show, Slot } from '@ilokesto/utilinent';

Quick Look

import { For, Show } from '@ilokesto/utilinent';

function Panel({ user, items }) {
  return (
    <Show when={user} fallback={<p>Please log in</p>}>
      <For each={items} fallback={<p>No items</p>}>
        {(item) => <div key={item.id}>{item.label}</div>}
      </For>
    </Show>
  );
}

Why these helpers exist

The common thread is not “utility components” in the abstract. It is that JSX often becomes noisy when rendering rules are more complex than one happy path.

Ternaries and && chains hide intent.
map() plus empty-state handling gets repeated everywhere.
Visibility and lazy loading are easy to wire badly.
as-child composition is awkward without a slot primitive.

Utilinent does not change React's rendering model. It just makes these patterns explicit.

Start here

Read Quick Start to see the main primitives in one page.
Read Mental Model if you want to understand how the package is organized.
Go to Conditional Rendering first if your main use case is JSX branching.
Go to Collection Helpers if the main pain point is map() plus fallback handling.
Go to Composition if the main pain point is asChild, slotting, or wrapperless composition.
Go to Async & Visibility if loading, viewport entry, or deferred rendering is the problem.
Go to createProxy if you are trying to build your own proxy-backed family.

Introduction