Utilinent

@ilokesto/utilinent is a React utility component package for rendering patterns that otherwise become noisy JSX: conditionals, list rendering, repeated nodes, switch-style branches, lazy intersection loading, async mounting, slots, and polymorphic proxy tags.

It does not replace React state, routing, data fetching, or a component library. It gives small declarative building blocks so UI intent stays visible in the markup.

Install

npm install @ilokesto/utilinent

react is a peer dependency and must already be installed by your app.

Minimal example

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

type User = { id: string; name: string };

export function UserList({ users, loading }: { users?: User[]; loading: boolean }) {
  return (
    <Show when={!loading} fallback={<p>Loading users...</p>}>
      <For.ul each={users} fallback={<p>No users found.</p>}>
        {(user) => <li key={user.id}>{user.name}</li>}
      </For.ul>
    </Show>
  );
}

Show handles the conditional branch. For.ul renders the list inside a real <ul> and shows a fallback when the array is empty or missing.

What it gives you

• Conditional rendering with Show.
• List rendering with For.
• Numeric repetition with Repeat.
• First-match branching with Switch and Match.
• Async child resolution with Mount.
• Intersection-aware rendering with Observer and Slacker.
• Slot-style prop merging with Slot and Slottable.
• Conditional wrapping with OptionalWrapper.
• Custom proxy components through PluginManager.

Documentation map

• Quick start: convert a loading/empty/list component.
• Core concepts: truthiness, fallbacks, proxy tags, and composition.
• Reference: exact behavior for every exported component and helper.
• Guides: practical recipes for async data, lists, polymorphic tags, lazy loading, and custom proxy components.
• React integration: how these components fit normal React applications.
• Troubleshooting: common mistakes and fixes.