ui-render

Django-style render() for React & Vite Render components by path or name with props — no need for manual imports.

✨ Features

🎯 Render components dynamically with render(componentName, props)

⚡ Zero-config with Vite (import.meta.glob)

📦 Lightweight — no runtime overhead

🛠 Supports nested directories (shared/UserInfoCard)

✅ Works in both dev and production builds

📦 Installation npm install ui-render

This package requires React 18+ and Vite.

⚡ Quick Start Example

Create a Vite + React project

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

Install ui-render

npm install ui-render

-> Add lib/ui.ts

// src/lib/ui.ts
import { createRenderer } from "ui-render";

export const render = createRenderer({
  baseDir: "src/components", 
  viteModules: import.meta.glob("/src/components/**/*.tsx"),
});

-> Create components

// src/components/Hero.tsx
export default function Hero({ title }: { title: string }) {
  return <h1 className="text-3xl font-bold">{title}</h1>;
}

// src/components/About.tsx
export default function About() {
  return <p className="text-gray-600">This is the about section.</p>;
}

// src/components/shared/UserInfoCard.tsx
export default function UserInfoCard({ name, email }: { name: string; email: string }) {
  return (
    <div className="border rounded p-4">
      <h2 className="font-semibold">{name}</h2>
      <p>{email}</p>
    </div>
  );
}


// Use in App.tsx

// src/App.tsx
import { render } from "@/lib/ui";

function App() {
  return (
    <div className="flex flex-col gap-4 p-6">
      {render("Hero", { title: "Hello World!" })}
      {render("About")}
      {render("shared/UserInfoCard", {
        name: "John Doe",
        email: "[email protected]",
      })}
    </div>
  );
}

export default App;

Run the app

npm run dev

Open http://localhost:5173 🚀

⚙️ API

createRenderer(options)

| Option | Type | Required | Description | | ------------ | ------------------------------------ | -------- | ---------------------------------- | | baseDir | string | ✅ | Root directory for components | | viteModules| Record<string, () => Promise<any>> | ✅ | Import map from import.meta.glob |

Returns a render function:

render(componentName: string, props?: Record<string, any>): ReactNode

📁 File Naming Conventions

| File Location | Render Key | | ------------------------------------- | ----------------------- | | src/components/Hero.tsx | "Hero" | | src/components/About.tsx | "About" | | src/components/shared/UserInfoCard.tsx | "shared/UserInfoCard" |

⚠️ Important Warning

Do not render a component inside itself using the render() function.
For example, avoid doing this inside Home.tsx:

function Home() {
  return (
    <div>
      {render("Home")} {/* ❌ This will cause infinite recursion */}
    </div>
  );
}

🛠 Next Version goals

• Manifest support (non-Vite projects)

• Next.js RSC support

• Custom error fallback option